How to change a scrolling element behavior on resize? (HTML, CSS, JavaScript)

Question

Currently, if a scrolling div on my web page is made vertically smaller, the content stays fixed at the top top of the div, and content that was previously at the bottom of the div becomes hidden.

I want this to work in the opposite direction: when the div resizes, the content stays fixed to the bottom border and content previously at the top collapses.

Think of it like a typical messenger app on your phone. When you enter text and the input box increases in size, it causes the area displaying previous messages to get smaller, but when that happens, the content stays fixed to the bottom border.

How can I achieve this in HTML/CSS/JavaScript?

you probably want to use fixed positioning but you need to post code if you want a specific answer. — I wrestled a bear once., Jan 14 '16 at 00:43

score 2 · Accepted Answer · edited May 23 '17 at 12:07

This can be done using CSS, as I showed in this answer.

And here is the code part which make it happen.

html, body { height:100%; margin:0; padding:0; }

.chat-window{
  display:flex;
  flex-direction:column;
  height:100%;
}
.chat-messages{
  flex: 1;
  height:100%;
  overflow: auto;
  display: flex;
  flex-direction: column-reverse;
}

/* begin - fix for hidden scrollbar in IE/Edge/Firefox */
.chat-messages-text{ overflow: auto; }
@media screen and (-webkit-min-device-pixel-ratio:0) {
  .chat-messages-text{ overflow: visible; }
  /*  reset Edge as it identifies itself as webkit  */
  @supports (-ms-accelerator:true) { .chat-messages-text{ overflow: auto; } }
}

<div class="chat-window">
  <div class="chat-messages">
    <div class="chat-messages-text" id="messages">
      Long long content 1!<br/>
      Long long content 2!<br/>
      Long long content 3!<br/>
      Long long content 4!<br/>
      Long long content 5!<br/>
      Long long content 1!<br/>
      Long long content 2!<br/>
      Long long content 3!<br/>
      Long long content 4!<br/>
      Long long content 5!<br/>
      Long long content 1!<br/>
      Long long content 2!<br/>
      Long long content 3!<br/>
      Long long content 4!<br/>
      Long long content 5!<br/>
      Long long content 1!<br/>
      Long long content 2!<br/>
      Long long content 3!<br/>
      Long long content 4!<br/>
      Long long content 5!<br/>
      Long long content 1!<br/>
      Long long content 2!<br/>
      Long long content 3!<br/>
      Long long content 4!<br/>
      Long long content 5!<br/>
    </div>
  </div>
</div>

This is exactly what I needed! Thank you so much! – TWNeal Jan 23 '16 at 09:13 — TWNeal, Jan 23 '16 at 09:13

score 1 · Answer 2 · edited May 23 '17 at 11:52

~~To my knowledge, as of now, your request cannot be achieved with CSS alone.~~ Nice one, LGSon! I should have thought of that. :)

I added the CSS and HTML only to demonstrate the behavior, but you don't actually need most of it. What you will probably want are:

the JavaScript/jQuery code
adding scrollMeDown class on elements you want bottom scrolled.

Obviously, they will need to overflow vertically for this to work (set a fixed height or max-height and overflow-y:auto|scroll) on them.

Both solutions scroll down any vertically overflowing element with a class of scrollMeDown on window load and resize events.

with JavaScript:

var scrollMeDown = function(el) {
      el.scrollTop = el.scrollHeight;
    }, 
    scrollAllDown = function() {
      var elements = document.querySelectorAll('.scrollMeDown');
      for (i = 0; i < elements.length; i++) {
        scrollMeDown(elements[i]);
      }
    };
window.onresize = function() {
  scrollAllDown();
}
window.onload = function() {
  scrollAllDown();
}

body {
   margin: 0;
   padding: 0;
 }
 
 .container {
   margin: 0;
   padding: 0;
   display: flex;
   box-sizing: border-box;
   align-content: stretch;
 }
 
 .scrollMeDown {
   max-height: 100vh;
   overflow-y: auto;

   flex: 0 1 19em;
   max-width: 50vw;
   padding: 0 1em;
   box-sizing: border-box;
   margin: 0;
 }

<div class="container">
  <div class="scrollMeDown">
    <p>Try-hard fap health goth put a bird on it, wayfarers slow-carb taxidermy tofu bitters pabst synth street art narwhal. Everyday carry neutra drinking vinegar kickstarter tote bag. +1 mustache selvage mixtape kale chips mlkshk. Helvetica iPhone yuccie 90's VHS, kogi kickstarter authentic quinoa umami. Narwhal pour-over bushwick migas. Cornhole ennui post-ironic everyday carry helvetica. Kitsch 3 wolf moon retro, fashion axe sartorial YOLO williamsburg.</p>
    <p>Dreamcatcher you probably haven't heard of them +1, chartreuse mixtape fingerstache banh mi sustainable yuccie pitchfork. Vice hella health goth, kogi marfa brunch cray small batch semiotics authentic hammock whatever pug trust fund. Raw denim gluten-free taxidermy scenester butcher, yr kombucha ennui pop-up roof party bicycle rights. Intelligentsia four loko viral, ethical chartreuse shabby chic mumblecore gastropub. 90's squid biodiesel direct trade bitters twee. Tilde DIY tousled green juice fanny pack, quinoa roof party kickstarter. Thundercats pork belly chambray stumptown chillwave, shabby chic ramps cardigan.</p>
  </div>
  <div class="scrollMeDown">
    <p>Try-hard fap health goth put a bird on it, wayfarers slow-carb taxidermy tofu bitters pabst synth street art narwhal. Everyday carry neutra drinking vinegar kickstarter tote bag. +1 mustache selvage mixtape kale chips mlkshk. Helvetica iPhone yuccie 90's VHS, kogi kickstarter authentic quinoa umami. Narwhal pour-over bushwick migas. Cornhole ennui post-ironic everyday carry helvetica. Kitsch 3 wolf moon retro, fashion axe sartorial YOLO williamsburg.</p>
    <p>Dreamcatcher you probably haven't heard of them +1, chartreuse mixtape fingerstache banh mi sustainable yuccie pitchfork. Vice hella health goth, kogi marfa brunch cray small batch semiotics authentic hammock whatever pug trust fund. Raw denim gluten-free taxidermy scenester butcher, yr kombucha ennui pop-up roof party bicycle rights. Intelligentsia four loko viral, ethical chartreuse shabby chic mumblecore gastropub. 90's squid biodiesel direct trade bitters twee. Tilde DIY tousled green juice fanny pack, quinoa roof party kickstarter. Thundercats pork belly chambray stumptown chillwave, shabby chic ramps cardigan.</p>
    <p>Pitchfork semiotics 90's, twee sartorial fingerstache slow-carb mixtape typewriter narwhal shoreditch godard. Beard yuccie green juice heirloom, deep v VHS austin normcore ethical organic health goth. Pickled literally messenger bag tumblr +1 crucifix. Forage green juice actually semiotics fashion axe, marfa chambray hashtag readymade. Franzen swag leggings, irony kogi gochujang art party. Cronut pork belly intelligentsia XOXO, gochujang ethical sriracha artisan squid. Tousled church-key offal flexitarian retro kitsch.</p>
    <p>Knausgaard bushwick fap, normcore cronut sustainable beard portland shabby chic quinoa semiotics yr cliche microdosing lo-fi. Kale chips kitsch mumblecore YOLO quinoa, DIY twee artisan authentic. Franzen +1 pinterest, godard slow-carb ramps cornhole ennui occupy butcher ugh PBR&B readymade pour-over. Echo park tacos health goth williamsburg mlkshk, umami viral fap tousled. Mixtape plaid etsy authentic, paleo blog forage gastropub. Master cleanse mixtape brunch chartreuse pabst dreamcatcher craft beer, truffaut slow-carb VHS 8-bit williamsburg beard swag shabby chic. Flannel next level lumbersexual, heirloom lo-fi gochujang tofu.</p>
  </div>
</div>

If you need it run on additional events, just call any of these functions on your events:

scrollAllDown() - scrolls down all .scrollMeDown elements
scrollMeDown(DOMElement) - scrolls down the element passed as argument

with jQuery:

$.fn.extend({
  scrollMeDown: function() {
    $(this).scrollTop($(this).prop('scrollHeight'));
  },
  scrollAllDown: function(selector) {
    $(selector).each(function(){
      $(this).scrollMeDown();
    })
  }
})

$(window).on('load resize', function() {
  $().scrollAllDown('.scrollMeDown');
});

body {
   margin: 0;
   padding: 0;
 }
 
 .container {
   margin: 0;
   padding: 0;
   display: flex;
   box-sizing: border-box;
   align-content: stretch;
 }
 
 .scrollMeDown {
   max-height: 100vh;
   overflow-y: auto;

   flex: 0 1 19em;
   max-width: 50vw;
   padding: 0 1em;
   box-sizing: border-box;
   margin: 0;
 }

<div class="container">
<div class="scrollMeDown">
  <p>Try-hard fap health goth put a bird on it, wayfarers slow-carb taxidermy tofu bitters pabst synth street art narwhal. Everyday carry neutra drinking vinegar kickstarter tote bag. +1 mustache selvage mixtape kale chips mlkshk. Helvetica iPhone yuccie 90's VHS, kogi kickstarter authentic quinoa umami. Narwhal pour-over bushwick migas. Cornhole ennui post-ironic everyday carry helvetica. Kitsch 3 wolf moon retro, fashion axe sartorial YOLO williamsburg.</p>
  <p>Dreamcatcher you probably haven't heard of them +1, chartreuse mixtape fingerstache banh mi sustainable yuccie pitchfork. Vice hella health goth, kogi marfa brunch cray small batch semiotics authentic hammock whatever pug trust fund. Raw denim gluten-free taxidermy scenester butcher, yr kombucha ennui pop-up roof party bicycle rights. Intelligentsia four loko viral, ethical chartreuse shabby chic mumblecore gastropub. 90's squid biodiesel direct trade bitters twee. Tilde DIY tousled green juice fanny pack, quinoa roof party kickstarter. Thundercats pork belly chambray stumptown chillwave, shabby chic ramps cardigan.</p>
</div>
<div class="scrollMeDown">
  <p>Try-hard fap health goth put a bird on it, wayfarers slow-carb taxidermy tofu bitters pabst synth street art narwhal. Everyday carry neutra drinking vinegar kickstarter tote bag. +1 mustache selvage mixtape kale chips mlkshk. Helvetica iPhone yuccie 90's VHS, kogi kickstarter authentic quinoa umami. Narwhal pour-over bushwick migas. Cornhole ennui post-ironic everyday carry helvetica. Kitsch 3 wolf moon retro, fashion axe sartorial YOLO williamsburg.</p>
  <p>Dreamcatcher you probably haven't heard of them +1, chartreuse mixtape fingerstache banh mi sustainable yuccie pitchfork. Vice hella health goth, kogi marfa brunch cray small batch semiotics authentic hammock whatever pug trust fund. Raw denim gluten-free taxidermy scenester butcher, yr kombucha ennui pop-up roof party bicycle rights. Intelligentsia four loko viral, ethical chartreuse shabby chic mumblecore gastropub. 90's squid biodiesel direct trade bitters twee. Tilde DIY tousled green juice fanny pack, quinoa roof party kickstarter. Thundercats pork belly chambray stumptown chillwave, shabby chic ramps cardigan.</p>
  <p>Pitchfork semiotics 90's, twee sartorial fingerstache slow-carb mixtape typewriter narwhal shoreditch godard. Beard yuccie green juice heirloom, deep v VHS austin normcore ethical organic health goth. Pickled literally messenger bag tumblr +1 crucifix. Forage green juice actually semiotics fashion axe, marfa chambray hashtag readymade. Franzen swag leggings, irony kogi gochujang art party. Cronut pork belly intelligentsia XOXO, gochujang ethical sriracha artisan squid. Tousled church-key offal flexitarian retro kitsch.</p>
  <p>Knausgaard bushwick fap, normcore cronut sustainable beard portland shabby chic quinoa semiotics yr cliche microdosing lo-fi. Kale chips kitsch mumblecore YOLO quinoa, DIY twee artisan authentic. Franzen +1 pinterest, godard slow-carb ramps cornhole ennui occupy butcher ugh PBR&B readymade pour-over. Echo park tacos health goth williamsburg mlkshk, umami viral fap tousled. Mixtape plaid etsy authentic, paleo blog forage gastropub. Master cleanse mixtape brunch chartreuse pabst dreamcatcher craft beer, truffaut slow-carb VHS 8-bit williamsburg beard swag shabby chic. Flannel next level lumbersexual, heirloom lo-fi gochujang tofu.</p>
</div>
  </div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

This registers .scrollMeDown() and .scrollAllDown() as jQuery functions. Has the advantage of being able to run .scrollAllDown() on only a section (sectionSelector - use any CSS selector) of your document, for all the children selected by toBeScrolledSelector (use any CSS selector), using this construct:

$('sectionSelector').scrollAllDown('toBeScrolledSelector')

If you want it on all document, you don't need a sectionSelector, just run

$().scrollAllDown('toBeScrolledSelector')

Thanks .. and I give +1 for a complete script version (resizing included) — Asons, Jan 14 '16 at 13:11

score 0 · Answer 3 · answered Jan 14 '16 at 07:11

Try to salvage what you want from this

https://jsfiddle.net/uakxcws8/

Click the link "Click" at the bottom of the page to re-size the div

The core aspect would be to reset the scrolltop (jquery)

var newH = 300; // the value by which the div was shrunk   
var x = $("#swindow").scrollTop()+newH+100 ;
$("#swindow").scrollTop(x);

the constant 100 seem necessary to position the content exactly.

Tested this code in GC and FF

    <script>
    function init(){
         $("#btn").click(function(){
             var newH = 300;
             $("#swindow").css("height",newH+"px");
             var x = $("#swindow").scrollTop()+newH+100 ;
             $("#swindow").scrollTop(x);
         }); 
    }

    init();
    </script>
.
.
.    
    <div style="width: 800px; height:800px; border: solid 1px #000; position:relative;">
                    <div style="width:300px; height:700px; bottom:0; border: solid 1px #000; overflow:scroll; position:absolute;" id="swindow">
                        <div>
                           <p>...............</p>
                        </div>    
                    </div>
                </div>
                <a id="btn" style="cursor:pointer;">Click</a>

How to change a scrolling element behavior on resize? (HTML, CSS, JavaScript)

3 Answers3

with JavaScript:

with jQuery: