如何僅使用 CSS 使 Div 在加載時滾動到底部並保持用戶滾動位置？

動態滾動Div 與用戶滾動同步

尋求一個div 加載時自動滾動到底部的解決方案，保持其滾動位置直到用戶手動向上滾動？這個巧妙的問題探索了一種巧妙的僅 CSS 技術來實現這種效果。

理解解決方案

秘訣在於使用 flex 反轉 div 中元素的順序-direction：列反向。本質上，瀏覽器將 div 的底部視為頂部。

實作

要實現此技術，請建立一個帶有溢出的容器： auto 和在 CSS 樣式中設定 flex-direction: column-reverse:

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

然後，確保動態內容反向放置容器內的順序：

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

警告

請記住，此技術僅適用於支援Flexbox 的瀏覽器。

以上是如何僅使用 CSS 使 Div 在加載時滾動到底部並保持用戶滾動位置？的詳細內容。更多資訊請關注PHP中文網其他相關文章！