CSS - scroll-snap-align 属性

CSS scroll-snap-align 属性指定贴屏元素在其贴靠容器中的位置。它需要两个值，第一个用于块轴，第二个用于内联轴。

可能的值

none − 捕捉的元素未与捕捉容器的捕捉端口对齐。
start − 捕捉元素的捕捉点与捕捉容器的捕捉端口的起点对齐。
end − 捕捉元素的捕捉点与捕捉容器的捕捉端口的末端对齐。
center− 捕捉元素的捕捉点与捕捉容器的捕捉端口的中心对齐。

snapport 是滚动容器的区域，捕捉区域与该区域对齐。

适用于

所有 HTML 元素。

DOM 语法


object.style.scrollSnapAlign = "none|start|end|center";

CSS Scroll Snap Align - 无值

以下示例演示了如何使用 scroll-snap-align： none 属性 -


<html>
<head>
<style>
	 	.scroll-container {
	 	 	 display: flex;
	 	 	 width: 350px;
	 	 	 height: 200px;
	 	 	 overflow-x: auto;
	 	 	 overflow-y: hidden;
	 	}
	 	.scrolling-section1,
	 	.scrolling-section2,
	 	.scrolling-section3
	 	{
	 	 	 flex: 0 0 auto;
	 	 	 width: 300px;
	 	 	 height: 200px;
	 	 	 scroll-snap-align: none;
	 	}
	 	.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-align: none</div>
	 	 	 <div class="scrolling-section2">scroll-snap-align: none</div>
	 	 	 <div class="scrolling-section3">scroll-snap-align: none</div>
	 	</div>
</body>
</html>

CSS Scroll Snap Align - 起始值

以下示例演示了如何使用 scroll-snap-align： start 属性 -


<html>
<head>
<style>
	 	.scroll-container {
	 	 	 display: flex;
	 	 	 width: 350px;
	 	 	 height: 200px;
	 	 	 overflow-x: auto;
	 	 	 overflow-y: hidden;
	 	 	 scroll-snap-type: x mandatory;
	 	}
	 	.scrolling-section1,
	 	.scrolling-section2,
	 	.scrolling-section3 {
	 	 	 flex: 0 0 auto;
	 	 	 width: 300px;
	 	 	 height: 200px;
	 	 	 scroll-snap-stop: always;
	 	}
	 	.scrolling-section1 {
	 	 	 background-color: rgb(220, 235, 153);
	 	 	 scroll-snap-align: start;
	 	}
	 	.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-align: start</div>
	 	 	 <div class="scrolling-section2">scroll-snap-align</div>
	 	 	 <div class="scrolling-section3">scroll-snap-align</div>
	 	</div>
</body>
</html>

CSS 滚动捕捉对齐 - 中心值

以下示例演示了如何使用 scroll-snap-align： center 属性 -


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

CSS Scroll Snap Align - 结束值

以下示例演示了如何使用 scroll-snap-align： end 属性 -


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

打印本页