如何僅使用 CSS 使 Div 滾動到底部？

將溢位Div 捲動到底部：僅CSS 的解

考慮一個將div 容器限制為特定高度的場景動態新增內容。您希望確保它保持滾動到底部，除非用戶手動向上滾動。如何在不使用 JavaScript 的情況下實現這一目標？

答案在於在 CSS 中使用 flex-direction: column-reverse 屬性。此技術有效地將 div 的底部視為頂部。只要目標瀏覽器支援 Flexbox，結果就是一個在新增內容時自動捲動到底部的 div。

為了說明這一點，這裡有一個範例HTML 和CSS 程式碼片段：

CSS:

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

HTML:

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

HTML:透過將flex-direction 屬性設為column-reverse，標記順序本質上是相反的，確保內容看起來像滾動到底部一樣。此方法可讓您建立一個保持滾動到底部的 div，除非使用者明確向上捲動，從而優雅地解決最初的問題陳述。

以上是如何僅使用 CSS 使 Div 滾動到底部？的詳細內容。更多資訊請關注PHP中文網其他相關文章！