儘管添加了新內容，如何保持溢出 Div 始終滾動到底部？

保持溢位Div 捲動到底部（除非使用者向上捲動）

在某些場景下，我們需要一個div 來自動滾動頁面加載時到底部並保持在那裡，直到用戶向上滾動。但是，當用戶向下滾動時，儘管添加了動態內容，div 仍應保留在底部。

CSS 解決方案

實現此目的的巧妙解決方法行為是透過使用CSS的flex-direction:column-reverse屬性。這指示瀏覽器將 div 的底部視為頂部。只要 HTML 標籤的順序相反，瀏覽器就會確保始終顯示底部內容。

範例程式碼

<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>

此方法的優點

• 此方法的優點
• 此方法的優點不需要JavaScript
• 跨瀏覽器相容

支援動態內容插入即使向上捲動後也保持滾動位置

以上是儘管添加了新內容，如何保持溢出 Div 始終滾動到底部？的詳細內容。更多資訊請關注PHP中文網其他相關文章！