CSS - overscroll-behavior-block 属性_CSS 菜鸟教程

CSS 属性 overscroll-behavior-block 确定到达滚动区域的块方向边界时浏览器的行为。

有关详细信息，您可以参考 overscroll-behavior 。

可能的值

CSS 属性 overscroll-behavior-block 定义为下面给出的列表中的关键字。

auto − 默认滚动行为为 normal。
contain − 滚动行为仅在设置了该值的元素中可见。未在相邻元素上设置滚动。
none − 未看到滚动链接行为。避免了默认的滚动溢出行为。

适用对象

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

语法

overscroll-behavior-block = contain|auto|none

CSS overscroll-behavior-block - 包含值

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

<html>
<head>
<meta name="viewport" content="width=device-width" />
<style>
	 	main {
	 	 	 height: 2500px;
	 	 	 width: 100%;
	 	 	 background-color: slateblue;
	 	}

	 	main > div {
	 	 	 height: 200px;
	 	 	 width: 400px;
	 	 	 overflow: auto;
	 	 	 position: relative;
	 	 	 top: 50px;
	 	 	 left: 50px;
	 	 	 overscroll-behavior-block: contain;
	 	}

	 	div > div {
	 	 	 height: 500px;
	 	 	 width: 100%;
	 	 	 background-color: lightblue;
	 	}

	 	p {
	 	 	 padding: 10px;
	 	 	 background-color: rgba(0, 0, 150, 0.2);
	 	 	 margin: 0;
	 	 	 width: 250px;
	 	 	 position: relative;
	 	 	 top: 10px;
	 	 	 left: 2%;
	 	}
</style>
</head>
<body>
	 	<h1>overscroll-behavior-block 属性</h1>
	 	<main>
	 	 	 <h3>滚动小框内的内容并继续滚动。</h3>
	 	 	 <div>
	 	 	 	 	<div>
	 	 	 	 	 	 <p>
	 	 	 	 	 	 <b>overscroll-behavior-block</b> 定义垂直滚动区域行为。
	 	 	 	 	 	 值contact可防止父元素滚动。因此，防止
	 	 	 	 	 	 滚动链体验。
	 	 	 	 	 	 </p>
	 	 	 	 	</div>
	 	 	 </div>
	 	</main>
</body>
</html>

CSS overscroll-behavior-block - 值比较

以下示例演示了 overscroll-behavior-block 的用法。有两个内容相同的框，但一个设置了 contain 值，另一个是默认值 auto。可以看到两个框中滚动行为的比较。具有 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-auto {
	 	 	 background-color: pink;
	 	}

	 	#box-contain {
	 	 	 background-color: aliceblue;
	 	 	 overscroll-behavior: contain;
	 	}
	 	
	 	#main-box > div {
	 	 	 flex: 1;
	 	 	 height: 150px;
	 	}
</style>
</head>
<body>
	 	<h1>overscroll-behavior-block 属性</h1>
	 	<p>下面显示的两个框分别将溢出行为块设置为自动和包含。</p>
	 	<p>使用鼠标滚动第一个粉红色的框，一旦完全滚动，继续滚动，看到父元素被滚动。</p>
	 	<p>使用鼠标滚动第二个白框，一旦完全滚动，继续滚动，看到父元素没有滚动。</p>
	 	<div id="main-box">
	 	<div id="box-auto">
	 	 	 <h3>overscroll-behavior-block: auto</h3>
	 	 	 <p>
	 	 	 	 	 Lorem ipsum dolor坐在那里接受精英的采访。己二酸的体积是多少？阿氏白纹石斑鱼科是否具有类似灭绝的前景？如果它代表了容量的增加，那么所需的劳动量是合理的，并且可以保证最大的可用性。大量解释了液体溶液的时间和数量，减少和获得了类似的可吸入性，在时间上没有类似的错误，在其他情况下也不会出现工作人员的错误。Magnam假设面临类似的骚扰，即，在时间上自愿的情况下，劳动和劳动水平是公平的。不可侵犯的权利，不可剥夺的权利。例如，在志愿者和建筑师的支持下，服用鸦片酊前的药物本身就是一种药物，这是一种错误的药物。Praesentium volptate recented against the volptate！官方认为，一种对老年人的歧视可以最大限度地解释液体排斥对老年人健康的影响。
	 	 	 </p>
	 	</div>
	 	<div id="box-contain">
	 	 	 <h3>overscroll-behavior-block: contain</h3>
	 	 	 <p>
	 	 	 	 	 Lorem ipsum dolor坐在那里接受精英的采访。己二酸的体积是多少？阿氏白纹石斑鱼科是否具有类似灭绝的前景？如果它代表了容量的增加，那么所需的劳动量是合理的，并且可以保证最大的可用性。大量解释了液体溶液的时间和数量，减少和获得了类似的可吸入性，在时间上没有类似的错误，在其他情况下也不会出现工作人员的错误。Magnam假设面临类似的骚扰，即，在时间上自愿的情况下，劳动和劳动水平是公平的。不可侵犯的权利，不可剥夺的权利。例如，在志愿者和建筑师的支持下，服用鸦片酊前的药物本身就是一种药物，这是一种错误的药物。Praesentium volptate recented against the volptate！官方认为，一种对老年人的歧视可以最大限度地解释液体排斥对老年人健康的影响。
	 	 	 </p>
	 	</div>
	 	</div>
</body>
</html>

<< CSS - overflow-inline 属性 CSS - overscroll-behavior-inline 属性 >>