CSS - overscroll-behavior 属性

上一页
下一页

CSS overscroll-behavior 属性 是一个速记属性，用于确定浏览器在到达滚动区域的边界时执行的操作。

此属性的构成属性是 overscroll-behavior-x 和 overscroll-behavior-y。

滚动链接是当用户滚动超过可滚动元素的边界（顶部、底部、左侧或右侧）时观察到的一种行为，从而导致在祖先元素上滚动。这会在滚动中产生连锁效应。

例如，如果网页上有一个模式对话框，则该对话框包含可以垂直滚动的内容。当您到达此模式的可滚动区域的末尾时，将继续滚动到模式对话框后面的主页内容上。这种连续滚动体验称为滚动链接。

这种行为可能是可取的，也可能是不可取的，为了避免它，使用了属性 overscroll-behavior。该属性仅应用于可滚动容器。在 <iframe> 上设置此属性不起作用，因此需要在 iframe 文档的 <html> 和 <body> 元素上设置此属性。

可能的值

CSS overscroll-behavior 属性定义为下面给出的一个或两个关键字。这两个关键字分别指定 x 轴和 y 轴上的值。当只指定一个值时，x 轴和 y 轴都具有相同的值。

  • auto - 默认滚动行为是正常的。
  • contain − 滚动行为仅在设置值的元素中可见。不对相邻元素设置滚动。
  • none - 未看到滚动链接行为。避免了默认的滚动溢出行为。

适用于

所有未替换的块级元素和未替换的内联块元素。

语法


overscroll-behavior = [ contain | auto | none ]{1,2}

CSS overscroll-behavior - auto 值

以下示例演示了 overscroll-behavior： auto 的用法，该 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 - contain 比较

以下示例演示了 overscroll-behavior： contain 的用法，该 include 将包含的滚动效果设置为应用它的元素。因此，当达到可滚动元素的边界时，在滚动时，父元素不会被滚动。


<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 - auto contain 值

以下示例演示了 overscroll-behavior： auto contain（两个值）的使用，该操作将滚动效果设置为 auto on x 轴，并将滚动效果设置为 contained on 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>

CSS overscroll-behavior - 关联属性

下表列出了与 overscroll-behavior 属性关联的 CSS 属性：

属性 描述
overscroll-behavior-x 设置当达到滚动区域的水平边界时浏览器的行为。
overscroll-behavior-y 设置当达到滚动区域的垂直边界时浏览器的行为。
overscroll-behavior-block 设置当达到滚动区域的块方向边界时浏览器的行为。
overscroll-behavior-inline 设置在达到滚动区域的内联方向边界时浏览器的行为。
打印本页
上一页
下一页