scroll-snap-type
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2022年4月.
CSS 属性 scroll-snap-type 设置了在有滚动容器的情形下吸附至吸附点的严格程度。
尝试一下
scroll-snap-type: none;
scroll-snap-type: x mandatory;
scroll-snap-type: x proximity;
<section class="default-example" id="default-example">
<div id="example-element">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
<div class="info">Scroll »</div>
</section>
.default-example {
flex-wrap: wrap;
}
.default-example .info {
width: 100%;
padding: 0.5em 0;
font-size: 90%;
}
#example-element {
text-align: left;
width: 250px;
height: 250px;
overflow-x: scroll;
display: flex;
box-sizing: border-box;
border: 1px solid black;
}
#example-element > 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;
}
#example-element > div:nth-child(even) {
background-color: #fff;
color: rebeccapurple;
}
此属性不为吸附至吸附点指定任何确切的动画或运动规律，留待用户代理处理。
css
/* 不吸附 */
scroll-snap-type: none;
/* 表示吸附轴的关键字 */
scroll-snap-type: x;
scroll-snap-type: y;
scroll-snap-type: block;
scroll-snap-type: inline;
scroll-snap-type: both;
/* 表示吸附程度的可选关键字 */
/* mandatory 或 proximity */
scroll-snap-type: x mandatory;
scroll-snap-type: y proximity;
scroll-snap-type: both mandatory;
/* 全局值 */
scroll-snap-type: inherit;
scroll-snap-type: initial;
scroll-snap-type: revert;
scroll-snap-type: revert-layer;
scroll-snap-type: unset;
语法
取值
none-
在滚动此滚动容器的可见视口时，必须忽略吸附点。
x-
滚动容器仅在其横轴上吸附至吸附位置。
y-
滚动容器仅在其纵轴上吸附至吸附位置。
block-
滚动容器仅在其块向轴上吸附至吸附位置。
inline-
滚动容器仅在其行向轴上吸附至吸附位置。
both-
滚动容器在其两轴上独立地吸附至吸附位置（可能在各轴上吸附至不同的元素）。
mandatory-
若滚动容器当前未在滚动，则其可见视口必须吸附至吸附位置。
proximity-
若滚动容器当前未在滚动，则其可见视口可以吸附至吸附位置。是否吸附由用户代理根据滚动参数决定。若指定了吸附轴，则此为默认的吸附程度。
备注：若吸附口中的内容发生变动（如被添加、移动、删除或改变尺寸）或者与滚动吸附相关的任意属性（如 scroll-snap-type 或 scroll-margin）的值发生变化，则滚动容器将按照 scroll-snap-type 最新的值重新吸附。
形式定义
形式语法
scroll-snap-type =
none |
[ x | y | block | inline | both ] [ mandatory | proximity ]?
示例
不同轴上的吸附
HTML
html
<div class="holster">
<div class="container x mandatory-scroll-snapping" dir="ltr">
<div>x 轴强制、从左往右</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>
<div class="container x proximity-scroll-snapping" dir="ltr">
<div>x 轴靠近、从左往右</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>
<div class="container y mandatory-scroll-snapping" dir="ltr">
<div>y 轴强制、从左往右</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>
<div class="container y proximity-scroll-snapping" dir="ltr">
<div>y 轴靠近、从左往右</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>
<div class="container x mandatory-scroll-snapping" dir="rtl">
<div>x 轴强制、从右往左</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>
<div class="container x proximity-scroll-snapping" dir="rtl">
<div>x 轴靠近、从右往左</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>
<div class="container y mandatory-scroll-snapping" dir="rtl">
<div>y 轴强制、从右往左</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>
<div class="container y proximity-scroll-snapping" dir="rtl">
<div>y 轴靠近、从右往左</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>
</div>
CSS
css
/* 滚动吸附 */
.x.mandatory-scroll-snapping {
scroll-snap-type: x mandatory;
}
.y.mandatory-scroll-snapping {
scroll-snap-type: y mandatory;
}
.x.proximity-scroll-snapping {
scroll-snap-type: x proximity;
}
.y.proximity-scroll-snapping {
scroll-snap-type: y proximity;
}
.container > div {
text-align: center;
scroll-snap-align: center;
flex: none;
}
结果
规范
| Specification |
|---|
| CSS Scroll Snap Module Level 1 # scroll-snap-type |
浏览器兼容性
Loading…