如何使用瀏覽器捲軸在 DIV 內實現聚焦滾動？

利用瀏覽器滾動條進行聚焦的DIV 內容滾動

在創建動態網站佈局時，利用瀏覽器的主滾動條有選擇地捲動內容特定的DIV是期望的效果。然而，實現這一點可能具有挑戰性，正如用戶最初的嘗試所證明的那樣。

實現此行為的關鍵在於應用純 CSS。要實現此效果，請遵循以下原則：

1. 居中水平佈局：使用邊距和寬度水平對齊佈局，並根據不同的瀏覽器視窗大小進行調整。
2. 主要內容滾動：為主要內容分配一個 margin-right 值，將其推離側邊欄並允許瀏覽器滾動條控制其垂直滾動。
3. 固定側邊欄： 建立一個保持固定在瀏覽器視窗頂部的側邊欄，獨立於主要內容的滾動。單獨控制其滾動，並僅在滑鼠懸停時實現滾動條可見性。
4. 溢位處理：當側邊欄到達滾動末端時，視窗的捲軸接管。

請參閱答案中提供的示範小提琴來查看工作例如。

更新的注意事項：

要防止滑鼠懸停在側邊欄上時滾動主要內容，請確保側邊欄不是主要內容的子元素滾動容器。這可以防止滾動事件向上傳播到父級。

已提供另一個示範小提琴來說明此更新的要求。

以上是如何使用瀏覽器捲軸在 DIV 內實現聚焦滾動？的詳細內容。更多資訊請關注PHP中文網其他相關文章！