笔记:CSS Scroll Snap

之前在订阅的周报中看过这个属性,觉得还挺神奇的,当时看着觉得挺好记的便没有写个笔记来记录,过了很久回头看发现忘的差不多了,想想还是写一下便于自己回顾。

Scroll Snap定义:在元素滚动停止时,可以自动滚动停止在指定元素的指定位置。也就是说,比如:当你想滚动到第三张图片的时候,发现滚多了,显示区域漏出了第四张图片顶部部分,那么这时候Scroll Snap就会自动帮你调整,把第四张多余部分挤出显示区域,只显示第三张图片。

Scroll Snap相关属性分为两块,一个是作用在父容器上,另一个是作用在子元素上。父容器属性:scroll-snap-type,scroll-snap-stop,scroll-padding/scroll-padding-*。子元素属性:scroll-snap-align以及scroll-margin、scroll-margin-*。

scroll-snap-type:确定滚动时,是水平方向定位还是垂直方向定位。

none:默认值,表示滚动时候忽略捕捉点,就是平常的滚动。

x:水平定位。

y:垂直定位。

block:和块状元素排列一个滚动方向的定位点。默认文档流下就是垂直方向,也就是等同于y。

inline:和行内元素排列一个滚动方向的定位点。默认文档流下就是垂直方向,也就是等同于x。

both:水平以及垂直方向都捕捉。

mandatory:表示强制定位,无论是添加删除元素,还是滚动窗口小到不足以放下子元素。

proximity:对比了下如下张鑫旭老师的demo,在边缘处时候会,其他情况则不会。

借用张鑫旭老师的:mandatory和proximity对比demo

scroll-snap-stop:表示是否允许滚动容器忽略捕获位置。

normal:默认值,可以忽略捕获位置。on

always:不能忽略捕获位置,且必须定位到第一个捕获元素的位置。(暂无浏览器支持,这个属性类似鼠标滚轮事件,一次只允许滚动一屏)。

scroll-snap-align:作用在子元素上,表示捕获的位置是上边缘还是下边缘还是中心。该属性可同时使用以下两个属性

none:默认值,不设置捕获的位置。

start:起始位置对齐。

end:结束位置对齐。

center:居中对齐。

若看到这的朋友,学习前沿的css属性,强烈推荐张鑫旭老师,真的很乐意分享的一个的前端老师。

 

  • 2
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值