Javascript – Keep overflow div scrolled to bottom unless user scrolls up

csshtmljavascriptjqueryscroll

I have a div that is only 300 pixels big and I want it to when the page loads scroll to the bottom of the content. This div has content dynamically added to it and needs to stay scrolled all the way down. Now if the user decides to scroll up I don't want it to jump back to the bottom until the user scrolls all the way down again

Is it possible to have a div that will stay scrolled to the bottom unless the user scrolls up and when the user scrolls back to the bottom it needs to keep itself at the bottom even when new dynamic content is added. How would I go bout creating this.

Best Answer

I was able to get this working with CSS only.

The trick is to use display: flex; and flex-direction: column-reverse;

The browser treats the bottom like its the top. Assuming the browsers you're targeting support flex-box, the only caveat is that the markup has to be in reverse order.

Here is a working example. https://codepen.io/jimbol/pen/YVJzBg

Related Solutions

Javascript – Scroll to bottom of div

Here's what I use on my site:

var objDiv = document.getElementById("your_div");
objDiv.scrollTop = objDiv.scrollHeight;

Html – How to position the div at the bottom of its container

Likely not.

Assign position:relative to #container, and then position:absolute; bottom:0; to #copyright.

#container {
    position: relative;
}
#copyright {
    position: absolute;
    bottom: 0;
}

<div id="container">
  <!-- Other elements here -->
  <div id="copyright">
    Copyright Foo web designs
  </div>
</div>

Best Answer

Related Solutions

Javascript – Scroll to bottom of div

Html – How to position the div at the bottom of its container

Related Topic