Css 简明教程
CSS - overscroll-behavior
CSS 属性 overscroll-behavior 是一个简写属性，它决定了当滚动区域的边界达到时浏览器执行的操作。
此属性的组成属性为 * overscroll-behavior-x* 和 * overscroll-behavior-y* 。
Scroll chaining 是当用户滚动至可滚动元素的边界（顶部、底部、左侧或右侧）时观察到的行为，导致祖先元素上的滚动。这会创建滚动中的连锁效果。
例如，如果网页上有一个模态对话框，其中包含可垂直滚动的内容。在你到达此模态框的可滚动区域末尾时，滚动将继续出现在模态对话框后面的主页内容上。这种持续的滚动体验称为滚动链。
此行为可能需要甚至不需要，为了避免它，使用了属性 overscroll-behavior 。该属性仅应用于 scrollable containers 。在 <iframe> 上设置此属性没有任何作用，因此它需要在 iframe 文档的 <html> 和 <body> 元素上进行设置。
Possible Values
CSS 属性 overscroll-behavior 定义为一个或两个关键字，如下所示。两个关键字分别指定 x 和 y 轴的值。当仅指定一个值时，x 轴和 y 轴都具有相同的值。
-
auto − 默认滚动行为为 normal（正常）。
-
contain − 仅在设置值的元素中看到滚动行为。未设置相邻元素的滚动。
-
none − 看不到滚动链行为。避免了默认的滚动溢出行为。
CSS overscroll-behavior - auto Value
以下示例演示了设置滚动效果为连续的 overscroll-behavior: auto 的使用。因此，当滚动区域的边界达到时，在滚动时，父元素会滚动。
<html>
<head>
<style>
div {
margin: 5px 15px;
padding: 3px;
border: solid black 1px;
overflow: auto;
border: 2px solid black;
}
#main-box {
display: flex;
flex-wrap: wrap;
background-color: cornsilk;
height: 800px;
}
#box-1 {
background-color: lightblue;
overscroll-behavior: auto;
}
#main-box > div {
flex: 1;
height: 150px;
}
</style>
</head>
<body>
<h1>overscroll-behavior Property</h1>
<p>The box displayed below has overscroll-behavior set as auto, which is the default value.</p>
<p>Scroll the blue box using the mouse and once it is scrolled completely keep scrolling and see the parent element gets scrolled.</p>
<div id="main-box">
<div id="box-1">
<h2>overscroll-behavior: auto</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos voluptatum adipisci harum? Repudiandae doloribus aspernatur ex odit rem quasi eligendi perspiciatis impedit porro reiciendis? Ipsa fugit reprehenderit nesciunt quae voluptates, labore ducimus iste consectetur quibusdam sapiente modi et ab reiciendis assumenda ullam, voluptatibus maiores sunt cupiditate amet. Magnam vel explicabo tempora ad numquam cumque soluta aliquid dolore, ducimus et obcaecati perferendis voluptatibus beatae quasi, facilis nihil culpa dolorum modi officia ab similique at. Iure ab, eius amet similique quaerat tempore, exercitationem aperiam fugiat pariatur error ratione laborum autem nam neque quae quo sed ipsam ullam animi officiis. Magnam assumenda facere similique molestiae harum ratione, esse, laboriosam cum vel quisquam labore est tenetur vero quas ex eum atque voluptatibus temporibus voluptate iste ipsam fugiat reiciendis dolor velit. Delectus molestiae deleniti quam, nisi ullam perspiciatis doloribus dolore dolores, ratione, reprehenderit rerum. Saepe ex, maiores reiciendis aperiam laudantium ipsa ipsam iure amet aliquid at suscipit labore voluptate et iste architecto fugit esse est a eum dicta asperiores error exercitationem minus. Praesentium voluptatem recusandae accusamus veritatis voluptate! Officia nostrum esse vitae fuga odit ab optio quia autem consequuntur, ea modi dignissimos enim assumenda voluptatibus maxime explicabo aliquid repellendus magni molestias hic dolores earum tenetur.</p>
</div>
</div>
</body>
</html>CSS overscroll-behavior - Comparison of Values
以下示例演示了设置滚动效果包含在所应用元素中的 overscroll-behavior: contain 的使用。因此，当滚动区域的边界达到时，在滚动时，父元素不会滚动。
<html>
<head>
<style>
div {
margin: 5px 15px;
padding: 3px;
border: solid black 1px;
overflow: auto;
border: 2px solid black;
}
#main-box {
display: flex;
flex-wrap: wrap;
background-color: darkcyan;
height: 800px;
}
#box-1 {
background-color: pink;
}
#box-2 {
background-color: aliceblue;
overscroll-behavior: contain;
}
#main-box > div {
flex: 1;
height: 150px;
}
</style>
</head>
<body>
<h1>overscroll-behavior Property</h1>
<p>The two boxes displayed below has overscroll-behavior set as auto and contain, respectively.</p>
<p>Scroll the first pink box using the mouse and once it is scrolled completely keep scrolling and see the parent element gets scrolled.</p>
<p>Scroll the second white box using the mouse and once it is scrolled completely keep scrolling and see the parent element not getting scrolled.</p>
<div id="main-box">
<div id="box-1">
<h3>overscroll-behavior: auto</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos voluptatum adipisci harum? Repudiandae doloribus aspernatur ex odit rem quasi eligendi perspiciatis impedit porro reiciendis? Ipsa fugit reprehenderit nesciunt quae voluptates, labore ducimus iste consectetur quibusdam sapiente modi et ab reiciendis assumenda ullam, voluptatibus maiores sunt cupiditate amet. Magnam vel explicabo tempora ad numquam cumque soluta aliquid dolore, ducimus et obcaecati perferendis voluptatibus beatae quasi, facilis nihil culpa dolorum modi officia ab similique at. Iure ab, eius amet similique quaerat tempore, exercitationem aperiam fugiat pariatur error ratione laborum autem nam neque quae quo sed ipsam ullam animi officiis. Magnam assumenda facere similique molestiae harum ratione, esse, laboriosam cum vel quisquam labore est tenetur vero quas ex eum atque voluptatibus temporibus voluptate iste ipsam fugiat reiciendis dolor velit. Delectus molestiae deleniti quam, nisi ullam perspiciatis doloribus dolore dolores, ratione, reprehenderit rerum. Saepe ex, maiores reiciendis aperiam laudantium ipsa ipsam iure amet aliquid at suscipit labore voluptate et iste architecto fugit esse est a eum dicta asperiores error exercitationem minus. Praesentium voluptatem recusandae accusamus veritatis voluptate! Officia nostrum esse vitae fuga odit ab optio quia autem consequuntur, ea modi dignissimos enim assumenda voluptatibus maxime explicabo aliquid repellendus magni molestias hic dolores earum tenetur.
</p>
</div>
<div id="box-2">
<h3>overscroll-behavior: contain</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos voluptatum adipisci harum? Repudiandae doloribus aspernatur ex odit rem quasi eligendi perspiciatis impedit porro reiciendis? Ipsa fugit reprehenderit nesciunt quae voluptates, labore ducimus iste consectetur quibusdam sapiente modi et ab reiciendis assumenda ullam, voluptatibus maiores sunt cupiditate amet. Magnam vel explicabo tempora ad numquam cumque soluta aliquid dolore, ducimus et obcaecati perferendis voluptatibus beatae quasi, facilis nihil culpa dolorum modi officia ab similique at. Iure ab, eius amet similique quaerat tempore, exercitationem aperiam fugiat pariatur error ratione laborum autem nam neque quae quo sed ipsam ullam animi officiis. Magnam assumenda facere similique molestiae harum ratione, esse, laboriosam cum vel quisquam labore est tenetur vero quas ex eum atque voluptatibus temporibus voluptate iste ipsam fugiat reiciendis dolor velit. Delectus molestiae deleniti quam, nisi ullam perspiciatis doloribus dolore dolores, ratione, reprehenderit rerum. Saepe ex, maiores reiciendis aperiam laudantium ipsa ipsam iure amet aliquid at suscipit labore voluptate et iste architecto fugit esse est a eum dicta asperiores error exercitationem minus. Praesentium voluptatem recusandae accusamus veritatis voluptate! Officia nostrum esse vitae fuga odit ab optio quia autem consequuntur, ea modi dignissimos enim assumenda voluptatibus maxime explicabo aliquid repellendus magni molestias hic dolores earum tenetur.
</p>
</div>
</div>
</body>
</html>CSS overscroll-behavior - Two Keyword Values
以下示例演示了 overscroll-behavior: auto contain （两个值）的使用，它在 x 轴上设置自动滚动效果，在 y 轴上设置包含滚动效果。因此，当滚动区域的垂直边界达到时，在滚动时，父元素不会滚动（因为已包含），但是水平边界设置为自动，这将导致在 x 轴上滚动父元素。
<html>
<head>
<style>
#main-box, #box-2 {
margin: 15px;
padding: 3px;
border: solid black 1px;
overflow: auto;
}
#main-box p {
width: 200%;
}
#main-box {
background-color: rgb(197, 255, 236);
height: 1300px;
width: 2000px;
}
#box-2 {
float: left;
height: 250px;
width: 30%;
background-color: rgb(255, 205, 213);
overscroll-behavior: auto none;
}
</style>
</head>
<body>
<h1>overscroll-behavior - Two value Syntax</h1>
<p>The two value syntax is used with overscroll-behavior as auto on x axis and none on y-axis.</p>
<div id="main-box">
<div id="box-2">
<h3>overscroll-behavior: auto none</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos voluptatum adipisci harum? Repudiandae doloribus aspernatur ex odit rem quasi eligendi perspiciatis impedit porro reiciendis? Ipsa fugit reprehenderit nesciunt quae voluptates, labore ducimus iste consectetur quibusdam sapiente modi et ab reiciendis assumenda ullam, voluptatibus maiores sunt cupiditate amet. Magnam vel explicabo tempora ad numquam cumque soluta aliquid dolore, ducimus et obcaecati perferendis voluptatibus beatae quasi, facilis nihil culpa dolorum modi officia ab similique at. Iure ab, eius amet similique quaerat tempore, exercitationem aperiam fugiat pariatur error ratione laborum autem nam neque quae quo sed ipsam ullam animi officiis. Magnam assumenda facere similique molestiae harum ratione, esse, laboriosam cum vel quisquam labore est tenetur vero quas ex eum atque voluptatibus temporibus voluptate iste ipsam fugiat reiciendis dolor velit. Delectus molestiae deleniti quam, nisi ullam perspiciatis doloribus dolore dolores, ratione, reprehenderit rerum. Saepe ex, maiores reiciendis aperiam laudantium ipsa ipsam iure amet aliquid at suscipit labore voluptate et iste architecto fugit esse est a eum dicta asperiores error exercitationem minus. Praesentium voluptatem recusandae accusamus veritatis voluptate! Officia nostrum esse vitae fuga odit ab optio quia autem consequuntur, ea modi dignissimos enim assumenda voluptatibus maxime explicabo aliquid repellendus magni molestias hic dolores earum tenetur.
</p>
</div>
</div>
</body>
</html>