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时强制一项项滑动过去

相关推荐
snakeshe10101 分钟前
重构迷你React:引入wipRoot与协调子节点优化
前端
恋猫de小郭2 分钟前
iOS 26 beta1 重新禁止 JIT 执行,Flutter 下的 iOS 真机 hot load 暂时无法使用
android·前端·flutter
前端Hardy28 分钟前
实测!Three.js 实现动态粒子螺旋与星环环绕动画
前端·javascript
俊劫31 分钟前
响应式图片实战指南:深入理解与应用 img srcSet
前端·css·vue.js
vvilkim1 小时前
Flutter开发入门:Dart语言基础全面解析
android·前端·flutter
Allen Bright1 小时前
【CSS-4】掌握CSS文字样式:从基础到高级技巧
前端·css
lens941 小时前
Oxlint v1.0.0 发布:ESLint 的性能革命,快 50~100 倍!
前端·javascript
这里是阿栗1 小时前
TS进阶!深入探索 TypeScript 工具类型:内置神器与高阶扩展
前端·typescript
DarkLONGLOVE1 小时前
一键锁死网页内容!这个JS函数让你的原创无法被复制!
前端·javascript
DarkLONGLOVE1 小时前
彻底解决"'vue-cli-service' 不是内部或外部命令"的问题!
前端·vue.js