如何利用瀏覽器的捲軸讓側邊欄獨立滾動？

如何使用瀏覽器的滾動條滾動特定的DIV內容

簡介

許多網站，像Gizmodo 一樣，有一個佈局，其中部分內容隨著瀏覽器的滾動而滾動主滾動條，而其他部分保持固定。雖然這看起來很複雜，但完全可以透過 CSS 來實現。

解

要創造這個效果，我們需要考慮幾個面向：

• 水平居中：確保整體佈局在瀏覽器內水平居中
• 主要內容滾動：允許左側的主要內容使用主滾動條垂直滾動。
• 固定側邊欄：保留右側的側邊欄固定在視窗頂部，除非將滑鼠懸停在它。
• 滾動溢位：當滑鼠懸停在側邊欄上時啟用滾動，允許它使用自己的捲軸。

實現

CSS:

html, body, * {
    padding: 0;
    margin: 0;
}

.wrapper {
    min-width: 500px;
    max-width: 700px;
    margin: 0 auto;
}

#content {
    margin-right: 260px; /* = sidebar width + some white space */
}

#overlay {
    position: fixed;
    top: 0;
    width: 100%;
    height: 100%;
}

#overlay .wrapper {
    height: 100%;
}

#sidebar {
    width: 250px;
    float: right;
    max-height: 100%;
}

#sidebar:hover {
    overflow-y: auto;
}

#sidebar>* {
    max-width: 225px; /* leave some space for vertical scrollbar */
}

標記：

<div class="wrapper">
    <div>

標記：

標記：
標記：
• 說明：
• 包裝：
提供主要內容和側邊欄固定寬度的容器。

內容： 定義主要可捲動內容。

疊加：

建立覆蓋整個瀏覽器視窗的固定元素，確保即使主要內容顯示時側邊欄仍可見已捲動。

側邊欄：

#wrapper {
    min-width: unset;
    max-width: unset;
    height: 100%;
}

#content {
    margin-right: 0;
}

#sidebar {
    position: fixed;
    top: 0;
}

將側邊欄定位在右側，並僅在懸停時允許其滾動。

防止側邊欄懸停時滾動

<div>

如果需要，可以阻止側邊欄啟動滾動透過修改HTML 結構和CSS 懸停時：CSS:標記：

以上是如何利用瀏覽器的捲軸讓側邊欄獨立滾動？的詳細內容。更多資訊請關注PHP中文網其他相關文章！