使用scroll-snap实现吸附效果

1、 效果:

2、代码

css:

.list {
    display: flex;
    flex-direction: row;
    overflow: auto;
    white-space: nowrap;
    scroll-snap-type: x mandatory;
}
.content {
    flex-wrap: 0;
    flex-shrink: 0;
    height: 100px;
    width: 300px;
    scroll-snap-align: start;
    display: inline-block;
    text-align: center;
    font-size: 48px;
}

html:

<div class="list">
    <div class="content">1</div>
    <div class="content">2</div>
    <div class="content">3</div>
    <div class="content">4</div>
    <div class="content">5</div>
</div>

语法介绍

scroll-snap-type

• none: 默认值，忽略捕捉位置
• x: 捕捉水平轴上的定位点
• y: 捕捉垂直轴上的定位点
• block: 捕捉块元素排列轴上的定位点
• inline: 捕捉内联元素排列方向上的定位点
• both: 捕捉水平轴和垂直轴上的定位点
• mandatory: 容器的可视视图将“强制”静止在临时点上，无论是添加、删除、移动或者大小改变。
• proximity: 如果它当前没有被滚动，这个滚动容器的可视视图将基于基于用户代理滚动的参数去到临时点上。如果内容被添加、移动、删除或者重置大小，滚动偏移将被调整为保持静止在临时点上。

scroll-snap-align

这个属性作用在子元素上。

• none: 不定义捕捉位置
• start: 起始位置对其
• end: 结束为止对其
• center: 子元素的中心与容器的中心对齐。

scroll-snap-align: none;
scroll-snap-align: start end; /start: 表示块元素方向的定位方式，end: 表示内联元素的定位方式。/
scroll-snap-align: center;