如何使用純 CSS 實現固定側邊欄的選擇性滾動？

使用瀏覽器的主捲軸進行選擇性滾動

在網頁設計中，有時您可能希望為頁面的特定部分啟用滾動，同時保留其他區域固定的。此技術對於創建獨特的佈局（例如 GIZMODO 等流行網站上的佈局）特別有用。

問題：為了實現像GIZMODO 這樣的視覺吸引力和功能性佈局，開發人員在對齊頁面方面面臨挑戰

解決方案：使用純CSS，可以透過以下步驟實現所需的佈局：

1. 水平居中：要水平對齊頁面內容，請指定主容器的最小和最大寬度，並使用margin: 0 auto 屬性將其置中。
2. 主要內容捲動：透過指派一個 id（例如「#content」）來指定主要內容區域，並確保它使用 margin-right 屬性佔用適當的空間。
3. 側邊欄內容： 建立一個 id 如「#sidebar」的側邊欄並設定其寬度，將其定位在右側。使用 max-height 限制其高度，使用 float: right 進行正確對齊。
4. 懸停滾動： 要在滑鼠懸停在側邊欄上時啟用側邊欄滾動，請使用#sidebar:hover { Overflow-y: auto;}.
5. 滾動事件隔離： 如果需要，可以透過將側邊欄與主要內容的滾動容器分離來防止側邊欄觸發主要內容的滾動。

示範：在提供的示範小提琴中查看此解決方案的實際效果，其中左側內容隨瀏覽器的滾動條滾動，而右側邊欄保持固定。

以上是如何使用純 CSS 實現固定側邊欄的選擇性滾動？的詳細內容。更多資訊請關注PHP中文網其他相關文章！