CSS - scroll-snap-type 属性

上一页
下一页

CSS scroll-snap-type 属性指定滚动容器如何捕捉到捕捉位置。

要使用 scroll-snap-type 属性，您需要在 scroll 容器上设置它。您还需要在要卡入到位的元素上设置 scroll-snap-align 属性。

可能的值

  • none - 滚动容器不会捕捉到任何位置。
  • x − 此值用于水平滚动。
  • y − 此值用于垂直滚动。
  • block − 这使滚动容器停在块轴上最近的捕捉点。
  • inline - 这使滚动容器停在内联轴上最近的对齐点。
  • both - 它指定滚动应该在滚动容器内水平和垂直捕捉。
  • mandatory − 滚动容器应捕捉到最近的捕捉点，使用户必须滚动到特定位置。
  • proximity − 滚动容器应根据邻近度捕捉到最近的捕捉点。

适用于

所有 HTML 元素。

DOM 语法


object.style.scrollSnapType = "none|x|y|block|inline|both|mandatory|proximity";

CSS 滚动捕捉类型 - 无值

以下示例演示了 scroll-snap-type 的使用： none 属性 -


<html>
<head>
<style>
	 	.scroll-container {
	 	 	 display: flex;
	 	 	 width: 350px;
	 	 	 height: 200px;
	 	 	 overflow-x: scroll;
	 	 	 overflow-y: hidden;
	 	 	 white-space: nowrap;
	 	 	 scroll-snap-type: none;
	 	}
	 	.scrolling-section1,
	 	.scrolling-section2,
	 	.scrolling-section3 {
	 	 	 flex: 0 0 auto;
	 	 	 width: 320px;
	 	 	 height: 200px;
	 	 	 scroll-snap-align: center;
	 	}
	 	.scrolling-section1 {
	 	 	 background-color: rgb(220, 235, 153);
	 	}
	 	.scrolling-section2 {
	 	 	 background-color: rgb(230, 173, 218);	
	 	}
	 	.scrolling-section3 {
	 	 	 background-color: rgb(176, 229, 238);
	 	}
</style>
</head>
<body>
	 	<div class="scroll-container">
	 	 	 <div class="scrolling-section1">scroll-snap-type: none</div>
	 	 	 <div class="scrolling-section2">scroll-snap-type: none</div>
	 	 	 <div class="scrolling-section3">scroll-snap-type: none</div>
	 	 	 <div class="scrolling-section1">scroll-snap-type: none</div>
	 	</div>
</body>
</html>

CSS 滚动捕捉类型 - X 和 Y 必填值

以下示例演示如何使用 scroll-snap-type： x mandatory 和 scroll-snap-type： y mandatory 将使滚动容器停在 X 轴和 Y 轴上最近的捕捉点，即使您快速滚动也是如此 -


<html>
<head>
<style>
	 	.scroll-container1 {
	 	 	 display: flex;
	 	 	 width: 350px;
	 	 	 height: 200px;
	 	 	 overflow-x: scroll;
	 	 	 overflow-y: hidden;
	 	 	 white-space: nowrap;
	 	 	 scroll-snap-type: x mandatory;
	 	 	 margin-bottom: 20px;
	 	}
	 	.scroll-container2 {
	 	 	 width: 350px;
	 	 	 height: 200px;
	 	 	 overflow-y: scroll;
	 	 	 overflow-x: hidden;
	 	 	 white-space: nowrap;
	 	 	 scroll-snap-type: y mandatory;
	 	}
	 	.scrolling-section1,
	 	.scrolling-section2,
	 	.scrolling-section3 {
	 	 	 flex: 0 0 auto;
	 	 	 width: 320px;
	 	 	 height: 200px;
	 	 	 scroll-snap-align: center;
	 	}
	 	.scrolling-section1 {
	 	 	 background-color: rgb(220, 235, 153);
	 	}
	 	.scrolling-section2 {
	 	 	 background-color: rgb(230, 173, 218);	
	 	}
	 	.scrolling-section3 {
	 	 	 background-color: rgb(176, 229, 238);
	 	}
</style>
</head>
<body>
	 	<div class="scroll-container1">
	 	 	 <div class="scrolling-section1">scroll-snap-type: x mandatory</div>
	 	 	 <div class="scrolling-section2">scroll-snap-type: x mandatory</div>
	 	 	 <div class="scrolling-section3">scroll-snap-type: x mandatory</div>
	 	 	 <div class="scrolling-section1">scroll-snap-type: x mandatory</div>
	 	</div>
	 	<div class="scroll-container2">
	 	 	 <div class="scrolling-section1">scroll-snap-type: y mandatory</div>
	 	 	 <div class="scrolling-section2">scroll-snap-type: y mandatory</div>
	 	 	 <div class="scrolling-section3">scroll-snap-type: y mandatory</div>
	 	 	 <div class="scrolling-section1">scroll-snap-type: y mandatory</div>
	 	</div>
</body>
</html>

CSS 滚动捕捉类型 - X 和 Y 邻近值

以下示例演示了如何使用 scroll-snap-type： x proximity 和 scroll-snap-type： y proximity 属性来创建滚动容器，当您水平和垂直滚动时，这些部分会卡入到位 -


<html>
<head>
<style>
	 	.scroll-container1 {
	 	 	 display: flex;
	 	 	 width: 350px;
	 	 	 height: 200px;
	 	 	 overflow-x: scroll;
	 	 	 overflow-y: hidden;
	 	 	 white-space: nowrap;
	 	 	 scroll-snap-type: x proximity;
	 	 	 margin-bottom: 20px;
	 	}
	 	.scroll-container2 {
	 	 	 width: 350px;
	 	 	 height: 200px;
	 	 	 overflow-y: scroll;
	 	 	 overflow-x: hidden;
	 	 	 white-space: nowrap;
	 	 	 scroll-snap-type: y proximity;
	 	}
	 	.scrolling-section1,
	 	.scrolling-section2,
	 	.scrolling-section3 {
	 	 	 flex: 0 0 auto;
	 	 	 width: 300px;
	 	 	 height: 200px;
	 	 	 scroll-snap-align: center;
	 	}
	 	.scrolling-section1 {
	 	 	 background-color: rgb(220, 235, 153);
	 	}
	 	.scrolling-section2 {
	 	 	 background-color: rgb(230, 173, 218);	
	 	}
	 	.scrolling-section3 {
	 	 	 background-color: rgb(176, 229, 238);
	 	}
</style>
</head>
<body>
	 	<div class="scroll-container1">
	 	 	 <div class="scrolling-section1">scroll-snap-type: x proximity</div>
	 	 	 <div class="scrolling-section2">scroll-snap-type: x proximity</div>
	 	 	 <div class="scrolling-section3">scroll-snap-type: x proximity</div>
	 	 	 <div class="scrolling-section1">scroll-snap-type: x proximity</div>
	 	</div>
	 	<div class="scroll-container2">
	 	 	 <div class="scrolling-section1">scroll-snap-type: y proximity</div>
	 	 	 <div class="scrolling-section2">scroll-snap-type: y proximity</div>
	 	 	 <div class="scrolling-section3">scroll-snap-type: y proximity</div>
	 	 	 <div class="scrolling-section1">scroll-snap-type: y proximity</div>
	 	</div>
</body>
</html>

CSS 滚动捕捉类型 - 两个值

以下示例演示了 scroll-snap-type： both 属性将在水平和垂直上最近的捕捉点停止滚动容器 -


<html>
<head>
<style>
	 	.scroll-container {
	 	 	 display: flex;
	 	 	 width: 350px;
	 	 	 height: 200px;
	 	 	 overflow-x: scroll;
	 	 	 overflow-y: scroll;
	 	 	 white-space: nowrap;
	 	 	 scroll-snap-type: both;
	 	}
	 	.scrolling-section1,
	 	.scrolling-section2,
	 	.scrolling-section3 {
	 	 	 flex: 0 0 auto;
	 	 	 width: 320px;
	 	 	 height: 200px;
	 	 	 scroll-snap-align: center;
	 	}
	 	.scrolling-section1 {
	 	 	 background-color: rgb(220, 235, 153);
	 	}
	 	.scrolling-section2 {
	 	 	 background-color: rgb(230, 173, 218);	
	 	}
	 	.scrolling-section3 {
	 	 	 background-color: rgb(176, 229, 238);
	 	}
</style>
</head>
<body>
	 	<div class="scroll-container">
	 	 	 <div class="scrolling-section1">scroll-snap-type: both</div>
	 	 	 <div class="scrolling-section2">scroll-snap-type: both</div>
	 	 	 <div class="scrolling-section3">scroll-snap-type: both</div>
	 	 	 <div class="scrolling-section1">scroll-snap-type: both</div>
	 	</div>
</body>
</html>

CSS Scroll Snap Type - RTL 和 LTR 方向

以下示例演示了如何使用 scroll-snap-type 属性创建具有从右到左 （RTL） 和从左到右 （LTR） 两个方向的捕捉点的滚动容器 -


<html>
<head>
<style>
	 	.scroll-container1 {
	 	 	 display: flex;
	 	 	 width: 350px;
	 	 	 height: 150px;
	 	 	 overflow-x: scroll;
	 	 	 overflow-y: hidden;
	 	 	 white-space: nowrap;
	 	 	 scroll-snap-type: x mandatory;
	 	 	 margin-bottom: 20px;
	 	}
	 	.scroll-container2 {
	 	 	 width: 350px;
	 	 	 height: 150px;
	 	 	 overflow-y: scroll;
	 	 	 overflow-x: hidden;
	 	 	 white-space: nowrap;
	 	 	 scroll-snap-type: y mandatory;
	 	 	 margin-bottom: 20px;
	 	}
	 	.scroll-container3 {
	 	 	 display: flex;
	 	 	 width: 350px;
	 	 	 height: 150px;
	 	 	 overflow-x: scroll;
	 	 	 overflow-y: hidden;
	 	 	 white-space: nowrap;
	 	 	 scroll-snap-type: x proximity;
	 	 	 margin-bottom: 20px;
	 	}
	 	.scroll-container4 {
	 	 	 width: 350px;
	 	 	 height: 150px;
	 	 	 overflow-y: scroll;
	 	 	 overflow-x: hidden;
	 	 	 white-space: nowrap;
	 	 	 scroll-snap-type: y proximity;
	 	 	 margin-bottom: 20px;
	 	}
	 	.scrolling-section1,
	 	.scrolling-section2,
	 	.scrolling-section3 {
	 	 	 flex: 0 0 auto;
	 	 	 width: 320px;
	 	 	 height: 150px;
	 	 	 scroll-snap-align: center;
	 	}
	 	.scrolling-section1 {
	 	 	 background-color: rgb(220, 235, 153);
	 	}
	 	.scrolling-section2 {
	 	 	 background-color: rgb(230, 173, 218);	
	 	}
	 	.scrolling-section3 {
	 	 	 background-color: rgb(176, 229, 238);
	 	}
</style>
</head>
<body>
	 	<div class="scroll-container1" dir="ltr">
	 	 	 <div class="scrolling-section1">scroll-snap-type: x mandatory with ltr</div>
	 	 	 <div class="scrolling-section2">scroll-snap-type: x mandatory with ltr</div>
	 	 	 <div class="scrolling-section3">scroll-snap-type: x mandatory with ltr</div>
	 	 	 <div class="scrolling-section1">scroll-snap-type: x mandatory with ltr</div>
	 	</div>
	 	<div class="scroll-container2" dir="ltr">
	 	 	 <div class="scrolling-section1">scroll-snap-type: y mandatory with ltr</div>
	 	 	 <div class="scrolling-section2">scroll-snap-type: y mandatory with ltr</div>
	 	 	 <div class="scrolling-section3">scroll-snap-type: y mandatory with ltr</div>
	 	 	 <div class="scrolling-section1">scroll-snap-type: y mandatory with ltr</div>
	 	</div>
	 	<div class="scroll-container3" dir="ltr">
	 	 	 <div class="scrolling-section1">scroll-snap-type: x proximity with ltr</div>
	 	 	 <div class="scrolling-section2">scroll-snap-type: x proximity with ltr</div>
	 	 	 <div class="scrolling-section3">scroll-snap-type: x proximity with ltr</div>
	 	 	 <div class="scrolling-section1">scroll-snap-type: x proximity with ltr</div>
	 	</div>
	 	<div class="scroll-container4" dir="ltr">
	 	 	 <div class="scrolling-section1">scroll-snap-type: y proximity with ltr</div>
	 	 	 <div class="scrolling-section2">scroll-snap-type: y proximity with ltr</div>
	 	 	 <div class="scrolling-section3">scroll-snap-type: y proximity with ltr</div>
	 	 	 <div class="scrolling-section1">scroll-snap-type: y proximity with ltr</div>
	 	</div>
	 	<div class="scroll-container1" dir="rtl">
	 	 	 <div class="scrolling-section1">scroll-snap-type: x mandatory with rtl</div>
	 	 	 <div class="scrolling-section2">scroll-snap-type: x mandatory with rtl</div>
	 	 	 <div class="scrolling-section3">scroll-snap-type: x mandatory with rtl</div>
	 	 	 <div class="scrolling-section1">scroll-snap-type: x mandatory with rtl</div>
	 	</div>
	 	<div class="scroll-container2" dir="rtl">
	 	 	 <div class="scrolling-section1">scroll-snap-type: y mandatory with rtl</div>
	 	 	 <div class="scrolling-section2">scroll-snap-type: y mandatory with rtl</div>
	 	 	 <div class="scrolling-section3">scroll-snap-type: y mandatory with rtl</div>
	 	 	 <div class="scrolling-section1">scroll-snap-type: y mandatory with rtl</div>
	 	</div>
	 	<div class="scroll-container3" dir="rtl">
	 	 	 <div class="scrolling-section1">scroll-snap-type: x proximity with rtl</div>
	 	 	 <div class="scrolling-section2">scroll-snap-type: x proximity with rtl</div>
	 	 	 <div class="scrolling-section3">scroll-snap-type: x proximity with rtl</div>
	 	 	 <div class="scrolling-section1">scroll-snap-type: x proximity with rtl</div>
	 	</div>
	 	<div class="scroll-container4" dir="rtl">
	 	 	 <div class="scrolling-section1">scroll-snap-type: y proximity with rtl</div>
	 	 	 <div class="scrolling-section2">scroll-snap-type: y proximity with rtl</div>
	 	 	 <div class="scrolling-section3">scroll-snap-type: y proximity with rtl</div>
	 	 	 <div class="scrolling-section1">scroll-snap-type: y proximity with rtl</div>
	 	</div>
</body>
</html>

 

打印本页
上一页
下一页