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