問題概述
您希望建立一個自動的DIV元素載入時捲動到底部並保持此捲動位置,除非使用者向上捲動。此行為對於動態更新 DIV 中的內容是必要的,確保新添加的內容在底部保持可見,而不會突然跳到頂部。
解決方案
CSS -only 解決方案可以實現此所需的行為:
第1 步:Flexbox 設定
第1 步:Flexbox 設定
第1 步:Flexbox 設定
使用flex-direction: column-reverse 反轉DIV 內內容的流動。這使得瀏覽器將底部視為頂部,最初有效地滾動到底部。
第 2 步:標記反轉
由於內容順序顛倒,請確保標記以相反的順序構造,首先是要顯示的內容。CSS 程式碼:
HTML 程式碼:
透過此設置,內容最初捲動到「底部」元素。當動態添加新內容時,它會被放置在 DIV 的“底部”,Flexbox 佈局會自動將 DIV 滾動到底部,同時防止用戶滾動回底部時它向上跳轉。以上是僅使用 CSS 動態滾動 DIV 到底部時如何防止向上跳躍?的詳細內容。更多資訊請關注PHP中文網其他相關文章!