CSS scroll-snap-stop 属性确定滚动容器是滚动过去还是停留在最近的捕捉位置。
可能的值
- normal − 默认值。滚动容器将滚动经过捕捉点而不会停止。
- always − 此值强制滚动容器在每个捕捉位置停止，即使您快速滚动经过它们也是如此。
适用于
所有 HTML 元素。
DOM 语法
object.style.scrollSnapStop = "normal|always";
CSS Scroll Snap Stop - 正常值
以下示例演示了如何使用 scroll-snap-stop： normal 属性 -
<html>
<head>
<style>
.scroll-container {
display: flex;
width: 350px;
height: 200px;
overflow-x: auto;
overflow-y: hidden;
white-space: nowrap;
scroll-snap-type: x mandatory;
}
.scrolling-section1,
.scrolling-section2,
.scrolling-section3 {
flex: 0 0 auto;
width: 300px;
height: 200px;
scroll-snap-align: center;
scroll-snap-stop: normal;
}
.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-stop: normal</div>
<div class="scrolling-section2">scroll-snap-stop: normal</div>
<div class="scrolling-section3">scroll-snap-stop: normal</div>
<div class="scrolling-section1">scroll-snap-stop: normal</div>
</div>
</body>
</html>
CSS Scroll Snap Stop - 始终值
以下示例演示如何使用 scroll-snap-stop： always 属性在指定的对齐点停止滚动 -
<html>
<head>
<style>
.scroll-container {
display: flex;
width: 350px;
height: 200px;
overflow-x: auto;
overflow-y: hidden;
white-space: nowrap;
scroll-snap-type: x mandatory;
}
.scrolling-section1,
.scrolling-section2,
.scrolling-section3 {
flex: 0 0 auto;
width: 300px;
height: 200px;
scroll-snap-align: center;
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);
}
</style>
</head>
<body>
<div class="scroll-container">
<div class="scrolling-section1">scroll-snap-stop: always</div>
<div class="scrolling-section2">scroll-snap-stop: always</div>
<div class="scrolling-section3">scroll-snap-stop: always</div>
<div class="scrolling-section1">scroll-snap-stop: always</div>
</div>
</body>
</html>
