scroll-snap-stop
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.
CSS 属性 scroll-snap-stop
定义了滚动容器是否可“越过”吸附位置。
尝试一下
scroll-snap-stop: normal;
scroll-snap-stop: always;
<section class="default-example" id="default-example">
<p class="explanation">
The effect of this property can be noticed on devices with a touchpad. Try
to scroll through all items with a single swing. Value
<b class="keyword">'normal'</b> should pass through all pages, while
<b class="keyword">'always'</b> will stop at the second page.
</p>
<div class="snap-container">
<div>1</div>
<div id="example-element">2</div>
<div>3</div>
</div>
<div class="info">Scroll »</div>
</section>
.default-example {
flex-direction: column;
}
.explanation {
margin-top: 0;
}
.keyword {
color: darkorange;
}
.default-example .info {
width: 100%;
padding: 0.5em 0;
font-size: 90%;
}
.snap-container {
text-align: left;
width: 250px;
height: 250px;
overflow-x: scroll;
display: flex;
box-sizing: border-box;
border: 1px solid black;
scroll-snap-type: x mandatory;
}
.snap-container > div {
flex: 0 0 250px;
width: 250px;
background-color: rebeccapurple;
color: #fff;
font-size: 30px;
display: flex;
align-items: center;
justify-content: center;
scroll-snap-align: start;
}
.snap-container > div:nth-child(even) {
background-color: #fff;
color: rebeccapurple;
}
语法
css
/* 关键字值 */
scroll-snap-stop: normal;
scroll-snap-stop: always;
/* 全局值 */
scroll-snap-stop: inherit;
scroll-snap-stop: initial;
scroll-snap-stop: revert;
scroll-snap-stop: revert-layer;
scroll-snap-stop: unset;
取值
形式定义
形式语法
scroll-snap-stop =
normal |
always
示例
设置不同的吸附定格
下列示例演示了 scroll-snap-stop
的值 always
和 normal
之间的对比。当 scroll-snap-type
属性被设置为 mandatory
时——即此示例所使用的设置——scroll-snap-stop
的两值之间的区别更为明显。
HTML
html
<p>scroll-snap-stop: always(x 轴强制)</p>
<div class="x mandatory-scroll-snapping always-stop">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>
<p>在奇数位子元素上 scroll-snap-stop: always(x 轴强制)</p>
<div class="x mandatory-scroll-snapping always-stop-odd">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>
<p>在偶数位子元素上 scroll-snap-stop: always(x 轴强制)</p>
<div class="x mandatory-scroll-snapping always-stop-even">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>
<p>scroll-snap-stop: normal(x 轴强制)</p>
<div class="x mandatory-scroll-snapping normal-stop">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>
<p>scroll-snap-stop: always(y 轴强制)</p>
<div class="y mandatory-scroll-snapping always-stop">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>
<p>scroll-snap-stop: normal(y 轴强制)</p>
<div class="y mandatory-scroll-snapping normal-stop">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>
CSS
css
/* 在父元素上设定强制滚动吸附 */
.x.mandatory-scroll-snapping {
scroll-snap-type: x mandatory;
}
.y.mandatory-scroll-snapping {
scroll-snap-type: y mandatory;
}
/* 在子元素上定义滚动吸附对齐方式 */
div > div {
scroll-snap-align: center;
}
/* 在子元素上定义滚动吸附定格 */
.always-stop > div {
scroll-snap-stop: always;
}
.always-stop-odd > div:nth-of-type(odd) {
scroll-snap-stop: always;
}
.always-stop-even > div:nth-of-type(even) {
scroll-snap-stop: always;
}
.normal-stop > div {
scroll-snap-stop: normal;
}
结果
在下方的 x 轴盒和 y 轴盒中分别从左往右和从上往下滚动。在 scroll-snap-stop
属性被设置为 always
的 x 轴盒和 y 轴盒中,即使快速滚动,滚动也将被强制止于吸附点。然而在 scroll-snap-stop
属性被设置为 normal
的盒子中,吸附点在快速滚动时被跳过。
若有要求,则可在滚动容器中选择总是(always
)止于哪些元素。下列示例通过将奇数位和偶数为的元素设为目标对此进行了演示,可根据要求选择不同的策略。在下列示例中的第二和第三个盒子中,滚动分别不会“越过”奇数位和偶数位的元素。
规范
Specification |
---|
CSS Scroll Snap Module Level 1 # scroll-snap-stop |