使用瀏覽器滾動條在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>
理解解決方案:
其他注意事項:
透過實作此解決方案,您可以建立優雅的網頁佈局,為使用者提供增強的捲動體驗。
以上是如何使用瀏覽器捲軸實現Web佈局中的選擇性滾動?的詳細內容。更多資訊請關注PHP中文網其他相關文章!