首页 > 其他分享> > CSS 使用 sroll-snap-type 优化滚动

CSS 使用 sroll-snap-type 优化滚动

2022-01-28 09:07:18 作者：互联网

前言

最近看chokcoco大佬的css文章，看到了这篇使用 sroll-snap-type 优化滚动文章，发现这个属性可以解决我之前遇到的一个问题，于是打算接着这篇文章好好的学习一下。

基础知识

sroll-snap-type

通过设置 scroll-snap-type 将一个滚动容器转变为一个滚动捕捉容器，并且可以控制捕捉的严格度，如果没有指定严格度，默认为非精确的捕捉。

scroll-snap-type 支持设置两个参数，第一个为捕捉轴向，第二个参数为捕捉严格度，可省略。

捕捉轴向

x：捕捉影响捕捉视口 x 轴方向
y：捕捉影响捕捉视口的 y 轴方向
block：捕捉影响块轴方向
inline：捕捉影响行轴方向
both：捕捉分别影响所有方向

捕捉严格度

none: 不捕捉
mandatory：精确捕捉
proximity：非精确捕捉

scroll-snap-align

使用 scroll-snap-align 可以简单的控制将要聚焦的当前滚动子元素在滚动方向上相对于父容器的对齐方式。

scroll-snap-align: start 使当前聚焦的滚动子元素在滚动方向上相对于父容器顶部对齐
scroll-snap-align: center 使当前聚焦的滚动子元素在滚动方向上相对于父容器中心对齐。
scroll-snap-align: end 使当前聚焦的滚动子元素在滚动方向上相对于父容器底部对齐。

属性值

none: 未定义
start: 对齐开始位置
end: 对齐结束位置
center: 对齐中心位置

简单例子

基础知识不多，下面这几个例子可以更好的理解这个属性的用处

基础代码
下面的这几个例子都是基于这个代码

<div class="container">
    <div class="window">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
    </div>
</div>

.container {
  width: 300px;
  overflow: auto;
}
.window {
  width: 900px;
  height: 200px;
  background: pink;
  display: flex;
}
.item {
  width: 300px;
  height: 200px;
  background: pink;
  color: white;
  font-size: 40px;
}
.item:nth-child(2) {
  background: red;
}
.item:nth-child(3) {
  background: blue;
}

在这里插入图片描述
从上面的图片中可以看出，随着滚动条的滚动，并不能每次滚动一个

改进
在上面的代码上加上sroll-snap-type

// .container中加入  scroll-snap-type: x mandatory;  这个属性要放在设置了overflow的容器里
// .item中加入   scroll-snap-align: center;

scroll-snap-type: x mandatory x 表示捕捉 x 轴方向上的滚动，mandatory 表示强制将滚动结束后元素的停留位置设置到我们规定的地方。
scroll-snap-align: center; 设置滚动区域的捕捉位置位于中心位置
在这里插入图片描述
从上面的图中可以看出，当滚动区域超过中心位置时会切换到下一页，小于中心位置时不会切换

scroll-margin / scroll-padding

上述的 scroll-snap-align 很好用，可以控制滚动子元素与父容器的对齐方式。然而可选的值只有三个，有的时候我们希望进行一些更精细的控制时，可以使用 scroll-margin 或者 scroll-padding

其中：

scroll-padding 是作用于滚动父容器，类似于盒子的 padding
scroll-margin 是作用于滚动子元素，每个子元素的 scroll-margin 可以设置为不一样的值，类似于盒子的 margin

举个例子，在竖向滚动下，给滚动父容器添加一个 scroll-padding-top: 30px 等同于给每个子元素添加 ``scroll-margin-top: 30px`：
我们希望滚动子元素在 scroll-snap-align: start 的基础上，与容器顶部的距离为 30px

上面这两个属性和scroll-snap-type一样，加在设置了overflow属性的容器里。

标签：滚动,align,捕捉,snap,sroll,type,scroll
来源： https://blog.csdn.net/weixin_41897680/article/details/122701923