css 实现滚动吸附效果

• #css

一、演示

• 上左边是普通滚动效果。向下拖动垂直滚动条，当 A 元素有一大半消失时松开鼠标，滚动位置会停留在松开鼠标的位置；
• 上右边是滚动吸附效果。向下拖动垂直滚动条，当 A 元素有一大半消失时松开鼠标，B 元素会自动吸附到顶部位置；

本文介绍实现滚动吸附相关 css 属性: scroll-snap-type, scroll-snap-align。

二、容器与项目

滚动的 html 结构通常如下: div.container 称为容器，div.item 称为项目。

<style>
  .container {
    width: 300px;
    height: 300px;
    border: 1px solid #333;
    overflow: hidden auto;
    scroll-snap-type: y mandatory;
    scrollbar-width: thin;
  }

  .item {
      width: 300px;
      height: 250px;
      scroll-snap-align: start;
  }

  .item:nth-child(2n) {
      background-color: antiquewhite;
  }

  .item:nth-child(2n+1) {
      background-color: lightblue;
  }
</style>
<div class="container">
  <div class="item">A</div>
  <div class="item">B</div>
  <div class="item">C</div>
  <div class="item">D</div>
</div>

• scroll-snap-type 属性写在容器中；
• scroll-snap-align 属性是写在项目中；

三、scroll-snap-type

设置滚动是否有吸附效果，常用值如下:

/* 默认值, 不吸附 */
scroll-snap-type: none;
/* 自动吸附 */
scroll-snap-type: x mandatory;
scroll-snap-type: y mandatory;
scroll-snap-type: x proximity;
scroll-snap-type: y proximity;

默认值为 none 表示滚动没有吸附效果；
第一个值为 x 表示水平滚动有吸附效果，第一个值为 y 表示垂直滚动有吸附效果。
第二个值 mandatory 和 proximity 都有吸附效果，它们的区别是:

• mandatory: 如下左边, A 元素有一半(红线)消失时松开鼠标，B 元素就会自动吸附到顶部；
• proximity: 如下右边, A 元素有一半(红线)消失时松开鼠标，B 元素不会吸附，等到 A 元素有 60% (蓝线)消失时，B 元素才会自动吸附到顶部；

这里 60% 并不是一个准确的数字，容器宽高越大，这个数值就越大。相比于 mandatory 就是只要超过 50% 的距离，B 元素就会自动吸附到顶部。而 proximity 是要超过 50%，可能 60%，可能 70%，可能 80%，B 元素才会自动吸附到顶部。

四、scroll-snap-align

设置项目对齐方式，常用值如下：

scroll-snap-align: start;
scroll-snap-align: center;
scroll-snap-align: end;

如果项目宽高和容器宽高是一样的，那么这个属性设置值没有意义。
如下示例：容器宽高是 300 * 300，项目宽高是 300 * 250，依次滚动三个示例直到 B 元素自动吸附可以看到区别。

• start。垂直滚动，项目 B 吸附到容器顶部，如果是水平滚动，项目 B 吸附到容器左侧；
• center。垂直滚动，项目 B 吸附到容器中间；
• end。垂直滚动，项目 B 吸附到容器底部，如果是水平滚动，项目 B 吸附到容器右侧；

↶ 返回首页