How Can I Make a Div Scroll to the Bottom on Load and Maintain User Scroll Position Using Only CSS?

Dynamically Scrolling Div in Sync with User Scrolling

Seeking a solution for a div that automatically scrolls to the bottom when it loads, maintaining its scroll position until the user manually scrolls up? This ingenious question explores a clever CSS-only technique to achieve this effect.

Understanding the Solution

The secret lies in reversing the order of elements within the div using flex-direction: column-reverse. In essence, the browser treats the bottom of the div as if it were the top.

Implementation

To implement this technique, create a container with overflow: auto and set flex-direction: column-reverse within its CSS styles:

.container {
  height: 100px;
  overflow: auto;
  display: flex;
  flex-direction: column-reverse;
}

Then, ensure that the dynamic content is placed in reverse order within the container:

<div class="container">
  <div>Bottom</div>
  <div>...</div>
  <div>Top</div>
</div>

Caveat

Keep in mind that this technique only works in browsers that support Flexbox.

The above is the detailed content of How Can I Make a Div Scroll to the Bottom on Load and Maintain User Scroll Position Using Only CSS?. For more information, please follow other related articles on the PHP Chinese website!