如何使用瀏覽器的主捲軸使特定的 DIV 可滾動？

使用瀏覽器的主滾動條滾動DIV

查詢

問題：

您正在掙扎居中對齊網頁內容，同時使用瀏覽器的主捲軸使特定DIV 可滾動。

目標：

建立具有左側主視圖的水平居中佈局內容可透過瀏覽器的主滾動條垂直滾動，右側邊欄固定在頂部，只有當滑鼠懸停在其上時才可滾動。

解

雖然 Gizmodo 範例包含以下腳本側邊欄處理，用純CSS就可以達到想要的效果。解決方案包括：

1. 水平居中佈局，同時調整不同的視窗大小
2. 使用瀏覽器的捲軸建立可垂直滾動的主要內容部分
3. 修復側邊欄必要時接管的單獨滾動功能

實現

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>

自訂

主要內容和側邊欄寬度都可以依需求配置。請注意，側邊欄不是主要內容的滾動容器的子級，以防止側邊欄的滾動事件冒泡。這允許單獨的滾動行為。

結論

此解決方案為主要內容和側邊欄提供了具有獨立滾動功能的集中式佈局，利用瀏覽器的主滾動條來顯示主要內容。

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