How Can I Keep a Div Scrolled to Bottom While Preventing Upward Scrolling?

Keep a Div Scrolled to Bottom Unless the User Scrolls Up

Question:

How can I create a div that remains scrolled to the bottom, except when the user explicitly scrolls up and back down to the bottom again?

Answer Using CSS:

The key to solving this problem is to leverage CSS's flex-direction: column-reverse property. By applying this property to a div's container, we can essentially reverse the flow of content, treating the bottom as the top. This trick works because most browsers support flexbox.

Here's a working CSS example to achieve this effect:

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

With this CSS in place, the following HTML will create a div that automatically scrolls to the bottom:

<code class="html"><div class="container">
  <div>Bottom</div>
  <div>Hi</div>
  <div>Hi</div>
  <div>Hi</div>
  <div>Hi</div>
  <div>Hi</div>
  <div>Hi</div>
  <div>Hi</div>
  <div>Hi</div>
  <div>Hi</div>
  <div>Hi</div>
  <div>Hi</div>
  <div>Hi</div>
  <div>Hi</div>
  <div>Hi</div>
  <div>Hi</div>
  <div>Hi</div>
  <div>Top</div>
</div></code>

Note: This CSS approach reverses the order of the HTML markup, with the last item now appearing as the first. Keep this in mind when dynamically adding content to the div.

The above is the detailed content of How Can I Keep a Div Scrolled to Bottom While Preventing Upward Scrolling?. For more information, please follow other related articles on the PHP Chinese website!