学习CSS Scroll Snapping与scroll-snap-align

最新推荐文章于 2024-12-22 12:32:26 发布

原创最新推荐文章于 2024-12-22 12:32:26 发布 · 3.6k 阅读

12 ·

CC 4.0 BY-SA版权

本文介绍如何使用CSS的scroll-snap-type和scroll-snap-align属性来实现Web页面的平滑滚动效果，使页面在滚动时能够自动对齐到指定元素，提升用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

假如有个Web页面是一块一块的，如下图所示：
在这里插入图片描述
我们希望可以一块一块的滚动，比如当前一个块滚出去了一部分并且后一个块滚进来一部分的时候，实现后一个块自动滚入或者前一个块回弹到初始位置这种效果，以前的时候用js需要写比较复杂的判断逻辑，后来有了一个css scroll snap这个方法，可以比较方便的实现想要的效果了，基本够用。

基本页面

css代码：

ul {
      max-height: 100vh;
      overflow-y: scroll;
       padding: 0;
    }
    li {
      font-size: 6vw;
      height: 30vh;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    li:nth-child(1) {
      background-color: rgb(255, 0, 0);
    }

    li:nth-child(2) {
      background-color: rgb(255, 128, 0);
    }

    li:nth-child(3) {
      background-color: rgb(255, 255, 0);
    }

    li:nth-child(4) {
      background-color: rgb(0, 255, 0);
    }

    li:nth-child(5) {
      background-color: rgb(0, 255, 255);
    }

    li:nth-child(6) {
      background-color: rgb(0, 0, 255);
    }

    li:nth-child(7) {
      background-color: rgb(128, 0, 255);
    }

html代码：

 <ul>
    <li>赵</li>
    <li>钱</li>
    <li>孙</li>
    <li>李</li>
    <li>周</li>
    <li>吴</li>
    <li>郑</li>
  </ul>

ul里面七个li, 背景色是赤橙黄绿青蓝紫，文字分别是赵钱孙李周吴郑。
现在的页面就是非常普通的页面，只是普通平常的滚动，还没加效果。

新属性scroll-snap-type与scroll-snap-align

1、scroll-snap-type

The scroll-snap-type property specifies whether a scroll container is a scroll snap container, how strictly it snaps, and which axes are considered. If no strictness value is specified, proximity is assumed.

none | [ x | y | block | inline | both ] [ mandatory | proximity ]

scroll-snap-type指明了一个可以滚动的容器是否是scroll snap container , snap地是否严格() , 在哪个轴上实现snap效果。

2、scroll-snap-align

官方文档解释的好复杂，我也看不懂。

[ none | start | end | center ]

效果一

一个块被滚了一部分中途松手之后，页面自动滚回去或着自动滚到下一个块。，如下图所示：
在这里插入图片描述
这个应该算是css scroll snapping的最基本的用法了，
ul的样式中添加：

      scroll-snap-type: y mandatory;

li中添加样式：

      scroll-snap-align: start;

scroll-snap-type的属性值mandatory，使得当ul没有滚动的时候，会自动继续滚动到某个合适的li然后才停下来，
scroll-snap-align的属性值设置成了start, 看到的效果是：滚动的时候，‘赵’和‘李’都是部分出现在可视区域，但是松手后最后停留在了 “赵”，不过也可以设置成停留在下面的‘李’，就是效果二