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

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

您可以参考 overscroll-behavior 以获取详细信息。

可能的值

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

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

适用于

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

语法

overscroll-behavior-inline = contain | auto | none

CSS overscroll-behavior-inline - 包含值

以下示例演示了如何使用 overscroll-behavior-inline： contain，用于设置包含的水平滚动效果和非连续的效果。

<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<style>
	 	main {
	 	 	 height: 500px;
	 	 	 width: 2000px;
	 	 	 background-color: slateblue;
	 	}

	 	main > div {
	 	 	 height: 300px;
	 	 	 width: 500px;
	 	 	 overflow: auto;
	 	 	 position: relative;
	 	 	 top: 100px;
	 	 	 left: 100px;
	 	 	 overscroll-behavior-inline: contain;
	 	}

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

	 	p {
	 	 	 padding: 10px;
	 	 	 background-color: rgba(0, 0, 150, 0.2);
	 	 	 margin: 0;
	 	 	 width: 300px;
	 	 	 position: relative;
	 	 	 top: 10%;
	 	 	 left: 2%;
	 	}
</style>
</head>
<body>
	 	<h1>overscroll-behavior-inline Property</h1>
	 	<main>
	 	 	 <div>
	 	 	 <div>
	 	 	 	 	<p>
	 	 	 	 	<b>overscroll-behavior-inline</b> defines the horizontal scrolling (inline) area behavior.
	 	 	 	 	The value contain prevents the parent element getting scrolled. Thus preventing the	
	 	 	 	 	scrolling chain experience.
	 	 	 	 	</p>
	 	 	 </div>
	 	 	 </div>
	 	</main>
</body>
</html>

CSS overscroll-behavior-inline - 自动值

以下示例演示了如何使用 overscroll-behavior-inline： auto，它将水平滚动效果设置为连续的，就像一条链。

<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<style>
	 	main {
	 	 	 height: 500px;
	 	 	 width: 5000px;
	 	 	 background-color: rgb(220, 200, 100);
	 	}

	 	main > div {
	 	 	 height: 300px;
	 	 	 width: 500px;
	 	 	 overflow: auto;
	 	 	 position: relative;
	 	 	 top: 100px;
	 	 	 left: 100px;
	 	 	 overscroll-behavior-inline: auto;
	 	}

	 	div > div {
	 	 	 height: 100%;
	 	 	 width: 1500px;
	 	 	 background-color: lightgoldenrodyellow;
	 	}

	 	p {
	 	 	 padding: 10px;
	 	 	 background-color: rgba(100, 100, 100, 0.2);
	 	 	 margin: 0;
	 	 	 width: 300px;
	 	 	 position: relative;
	 	 	 top: 10%;
	 	 	 left: 2%;
	 	}
</style>
</head>
<body>
	 	<h1>overscroll-behavior-inline: auto Property</h1>
	 	<main>
	 	 	 <div>
	 	 	 <div>
	 	 	 	 	<p>
	 	 	 	 	<b>overscroll-behavior-inline</b> defines the horizontal scrolling (inline) area behavior.
	 	 	 	 	The value auto sets the parent element getting scrolled after the inline boundary of the scrollable element has been raeched.	
	 	 	 	 	Thus giving the scrolling chain experience.
	 	 	 	 	</p>
	 	 	 </div>
	 	 	 </div>
	 	</main>
</body>
</html>

<< CSS - overscroll-behavior-block 属性 CSS - overscroll-behavior-x 属性 >>