CSS - 溢出滚动行為：初學者指南

你好，未來的 CSS 巔峰大師！今天，我們將踏上一段令人興奮的旅程，探索 CSS 溢出滚动行為的領域。別擔心如果你從未寫過一行代碼——我將成為你的友好導遊，我們將一起逐步探討這個主題。所以，拿起你的虛擬背包，讓我們跳進去吧！

CSS - Overscroll

溢出滚动行為是什麼？

在我們深入細節之前，讓我們先了解溢出滚动行為是什麼。你是否曾在手機上瀏覽網頁時，當你滚动到最底部，它會彈跳？那就是溢出滚动行為在作用！這就像你讀一本書，當你試圖翻到最後一頁之後的頁碼——會有那種小小的阻力。CSS 的 overscroll-behavior 讓我們能夠控制網頁在這些情況下的行為。

可能的值和語法

現在，讓我們看看我們可以使用 overscroll-behavior 的哪些不同值以及如何在 CSS 中編寫它們。這裡有一個方便的表格來總結：

值	描述
auto	預設行為 - 允許滚动"溢出"到下一個元素
contain	阻止滚动鏈接但允許彈跳效果
none	阻止滚动鏈接和彈跳效果

基本語法如下：

元素 {
overscroll-behavior: 值;
}

讓我們用一些例子來分解這個！

示例 1：預設行為（auto）

body {
overscroll-behavior: auto;
}

這是默認設置。這就像把你的書放在桌子上——它會按照你期望的方式行為，有正常的滚动和彈跳。

示例 2：限制滚动

.scrollable-element {
overscroll-behavior: contain;
}

想象一下你在網頁中有一個可滚动的 div。使用 'contain'，這就像在章節末尾放一個書籤。你仍然可以在那個章節內翻頁（彈跳效果），但你不會意外翻到下一個章節（阻止滚动鏈接）。

示例 3：無溢出滚动效果

.modal {
overscroll-behavior: none;
}

這就像把你的書的最後一頁粘在一起。不再有翻頁或彈跳——它只是停止。

应用範圍

現在，你可能會想，"我能在哪裡使用這個很酷的屬性？" 好吧，它適用於所有元素，但特別有用於：

body 元素
可滚动的容器（例如帶有 overflow: scroll 的 div）

CSS overscroll-behavior - 值的比較

讓我們用一個真實世界的場景來比較這些值。想象一下你正在設計一個帶有可滚动側邊欄和主內容區域的網頁。

<div class="sidebar">
<!-- 側邊欄內容 -->
</div>
<div class="main-content">
<!-- 主內容 -->
</div>

.sidebar {
height: 100vh;
overflow-y: scroll;
overscroll-behavior: contain;
}

.main-content {
overscroll-behavior: auto;
}

在這個例子中，側邊欄將有自己的滚动行為被限制，而主內容將正常行為。這就像在一本主要的書（網頁）內有一本迷你書（側邊欄）——你可以翻動迷你書而不影響主要書籍。

CSS overscroll-behavior - 兩個關鍵詞值

你知道你可以使用兩個值與 overscroll-behavior 嗎？這就像為垂直和水平滚动給出分別的指示。

元素 {
overscroll-behavior: 垂直值 水平值;
}

例如：

.custom-scroll {
overscroll-behavior: contain auto;
}

這告訴瀏覽器限制垂直溢出滚动，但允許水平滚动行為正常。這就像有一本書，你不能垂直翻過最後一頁，但你可以將它側向轉動！

CSS overscroll-behavior - 相關屬性

溢出滚动行為在 CSS 家庭中有一些親戚。讓我們來認識它們：

overscroll-behavior-x：控制水平溢出滚动行為
overscroll-behavior-y：控制垂直溢出滚动行為

這些就像你 CSS 工具箱中的專業工具。當你需要精確控制時，這些是你的首选屬性。

.horizontal-scroll {
overscroll-behavior-x: contain;
}

.vertical-scroll {
overscroll-behavior-y: none;
}

在這個例子中，我們限制了水平溢出滚动，但完全阻止了垂直溢出滚动。這就像有一本全景照片書，你可以左右滚动，但不能上下滚动！

實際應用：模態示例

讓我們將所有這些知識應用於一個真實世界的例子——模態窗口。

<div class="page-content">
<!-- 你的主頁內容在這裡 -->
</div>
<div class="modal">
<div class="modal-content">
<!-- 你的模態內容在這裡 -->
</div>
</div>

.page-content {
height: 2000px; /* 長內容以启用滚动 */
}

.modal {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
display: flex;
justify-content: center;
align-items: center;
overscroll-behavior: contain;
}

.modal-content {
background-color: white;
padding: 20px;
max-height: 80vh;
overflow-y: auto;
overscroll-behavior: contain;
}

在這個例子中，我們創建了一個覆盖主內容的模態窗口。通過在模態和其內容上都設置 overscroll-behavior: contain，我們確保在模態內部的滚动不會影響主頁，且任何溢出滚动都被限制在模態內部。

結論

那麼，親愛的學生們，這就是 CSS 溢出滚动行為的領域，從基本概念到實際應用。記住，就像任何一本好書一樣，掌握 CSS 需要時間和練習。不要害怕嘗試和犯錯誤——這是我們學習和成長的方式。

在你繼續 CSS 的冒險時，請將這個溢出滚动行為的知識放在你的背包裡。它可能看起來是一個小細節，但正是這些小細節可以真正提升你的網頁設計，從好變偉大。

快樂編程，願你的滚动總是順滑！

Credits: Image by storyset