如何使用瀏覽器捲軸實現Web佈局中的選擇性滾動？

使用瀏覽器滾動條在Web 佈局中進行選擇性滾動

您的詢問旨在模擬Gizmodo 網站上觀察到的獨特滾動行為。也就是說，您的目標是使用瀏覽器的主捲軸啟用特定 div 元素的捲動，同時保持另一個 div 靜止。

您提供的測試頁面展示了您對居中佈局和啟用垂直滾動的理解。然而，事實證明，將這些方面結合起來具有挑戰性。讓我們提供一個滿足這兩個要求的全面解決方案：

純CSS 解決方案：

儘管Gizmodo 使用了額外的腳本，但使用純CSS 實現這種效果是可行的。我們的解決方案旨在：

• 響應式地將佈局居中。
• 使用瀏覽器的捲軸垂直捲動左側內容。
• 保持右側邊欄固定在瀏覽器視窗頂部，僅在懸停時引入捲軸。
• 到達側邊欄末尾時將滾動無縫轉移到瀏覽器的捲軸。

程式碼示範:

請參考以下示範小提琴：

<pre class="brush:php;toolbar:false">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 */
}

<pre class="brush:php;toolbar:false"><div>

理解解決方案：

• #包裝div 充當整個佈局的父容器。它確保水平居中。
• #content 包含主要內容且可垂直捲動。
• #overlay 是一個固定容器，允許滾動整個佈局。它用於創建內容滾動到瀏覽器視窗之外的錯覺。
• #sidebar 是右側固定側邊欄。它獨立滾動，直到到達末尾，此時滾動過渡到瀏覽器的滾動條。

其他注意事項：

• 防止滾動主頁側邊欄上的內容懸停：創建第二個小提琴，示範當滑鼠懸停在側邊欄上時如何防止主要內容滾動。
• 靈活寬度：考慮根據您的情況為主要內容和側邊欄實現靈活寬度首選項。

透過實作此解決方案，您可以建立優雅的網頁佈局，為使用者提供增強的捲動體驗。

以上是如何使用瀏覽器捲軸實現Web佈局中的選擇性滾動？的詳細內容。更多資訊請關注PHP中文網其他相關文章！