How to Keep an Overflow Div Scrolled to the Bottom Always, Despite New Content Addition?

Keeping an Overflow Div Scrolled to the Bottom (Unless the User Scrolls Up)

In certain scenarios, we need a div to automatically scroll to the bottom upon page load and remain there until the user scrolls up. However, when the user scrolls back down, the div should stay at the bottom despite the addition of dynamic content.

Solution with CSS

A clever workaround to achieve this behavior is by using CSS's flex-direction: column-reverse property. This instructs the browser to treat the bottom of the div as the top. As long as the HTML markup is in reverse order, the browser will ensure that the bottom content is always displayed.

Example Code

<code class="css">.container {
  height: 100px;
  overflow: auto;
  display: flex;
  flex-direction: column-reverse;
}</code>

<code class="html"><div class="container">
  <div>Bottom</div>
  <div>Hi</div>
  <!-- More content... -->
  <div>Top</div>
</div></code>

Advantages of this Approach

• Pure CSS solution, no JavaScript required
• Cross-browser compatible
• Supports dynamic content insertion
• Maintains scroll position even after scrolling up

The above is the detailed content of How to Keep an Overflow Div Scrolled to the Bottom Always, Despite New Content Addition?. For more information, please follow other related articles on the PHP Chinese website!