css3自动吸附scroll-snap

我们希望可以一块一块的滚动,比如当前一个块滚出去了一部分并且后一个块滚进来一部分的时候,实现后一个块自动滚入或者前一个块回弹到初始位置这种效果,以前的时候用js需要写比较复杂的判断逻辑,后来有了一个css scroll snap这个方法,可以比较方便的实现想要的效果了,基本够用。

html 复制代码
 <ul>
    <li>赵</li>
    <li>钱</li>
    <li>孙</li>
    <li>李</li>
    <li>周</li>
    <li>吴</li>
    <li>郑</li>
  </ul>
css 复制代码
ul{
     scroll-snap-type: y mandatory;
}

li{
    scroll-snap-align: start;
}

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

1、scroll-snap-type(吸附模式:添加到父元素中)

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

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

2、scroll-snap-align (吸附位置:添加到子元素中)

none \| start \| end \| center

3、Scroll-Snap-Stop (跳转方式,使用于轮播图)

nomal \| aways

有时,我们可能需要一种方法来防止用户在滚动时意外跳过一些重要的项。如果用户滚动太快,就有可能跳过某些项,设置为 aways时强制一项项滑动过去

相关推荐
月忆36423 分钟前
等待组(waitgroup)
前端·爬虫·python
令狐寻欢26 分钟前
HTML中 的 meta 标签常用属性及其作用
前端·html
SynthWriter31 分钟前
Trae 帮我生成了一个贪吃蛇的游戏,好玩儿
前端
用户214118326360244 分钟前
dify案例分享-Dify+RSS 聚合 8 大平台实时热点,新闻获取效率飙升 300%
前端
百锦再1 小时前
Razor编程中@Html的方法使用大全
前端·html
啪叽1 小时前
JavaScript可选链操作符(?.)的实用指南
前端·javascript
Ian在掘金1 小时前
bat+python实现easy connect自动连接
前端·python
代码搬运媛1 小时前
【react实战】如何实现监听窗口大小变化
前端·javascript·react.js
小桥风满袖1 小时前
Three.js-硬要自学系列30之专项学习环境光
前端·css·three.js
Luckyfif1 小时前
🤯由 性能指标 散发开来的 Performance API 被问爆了呀
前端·面试·性能优化