Scoll-snap使用手册

江河丶
866 阅读3分钟

发现之旅

最近玩CSS，发现了一个宝贝属性scoll-sanp,他可以捕捉你的滑动效果，用css就可以做出良好页面切换的效果。

1626927172461.gif

在过去我们使用CSS往往只能做到这个效果

1626927588432.gif

这种体验往往是不够友好的，如果我们希望有能加友好如同上面可以自动划过整张图片，往往就需要使用js来辅助实现这个效果，但是现在只需要简简单单的两行CSS代码就可以实现了！！！

接下来，我们就一起学习一下吧~

scoll-snap 工作原理MDN

scoll-snap工作原理其实很简单，就是自己定义一个容器，然后捕捉你在这个容器内的指定手势，然后容器内的子元素根据用户操作手势进行响应

scoll-snap属性

父容器

1. scoll-snap-type：val1 val2

  • val1

    • val1是用来定义捕捉手势方向的，然后根据捕捉的方向进行子元素移动
    • none不捕捉手势
    • x 捕捉X轴方向
    • y 捕捉y轴方向
    • block 捕捉block方向，即y轴方向，当都进行布局变化的根据布局的主轴方向进行捕捉
    • inline 捕捉和block方向垂直方向的手势
    • both 捕捉一切手势

    在这里个人推荐使用X、Y、both，体验更佳

  • val2

    • val2主要是定义滑动时候的表现形式，只有两个值，但是其中一个值表现形式并不稳定
    • mandatory 强制表现，他的表现形式为一定会强制页面吸附到指定地点，不会出现半屏卡在吸附点的结果(示例吸附点设置在容器左边)

1626936961466.gif - proximity 默认样式，不设置的默认选择这个，这个就会让元素不一定吸附在指定地点，当子元素左右两部分比较靠近吸附点的时候会进行吸附，当子元素中间一部分靠近吸附点的时候就不进行吸附，但是生效也是极不稳定，有时候不一定会出现效果(因为我也只是在最开始尝试出现过这种效果，实在是太难搞到素材了)

在使用第二个值的时候个人推荐mandatory,这种效果是最稳定的，也是更符合大家期待的样式

2. scoll-snap-padding/margin

定义容器的内/外边距,也可像我们平时使用padding/margin那样-top等在指定方向上定义，使用padding后元素会在指定方向上留下空白(因为过于简单就不想多说哈哈哈)

注使用的时候需要加上-webkit-overflow-scrolling: touch;兼容ios，不然在ios上捕捉手势会失败，还可以使用scroll-behavior: smooth;让子元素滑动更丝滑一点

子元素

1. scoll-snap-align

  • 作用于子元素，定义子元素的吸附点

  • start 让子元素吸附在容器滑动方向的起始点

  • center 让子元素吸附在中间位置

  • end 让子元素吸附在容器滑动方向后面

image.png

2. scroll-snap-stop

  • 定义子元素的滑动表现
  • 默认值normol，这时候用力滑动可以一次滑动多个子元素

1626938313886.gif

  • always 在定义这个值的子元素上一定会停下，如果连续的子元素定义了这个值，就会有翻页的效果，即每次只能划到上一个或者下一个(吐槽：想要实现这个效果一定要一个子元素就占满容器，否则还是容易出现会多划过两张的情况)

1626938670337.gif

重点

其实scoll-snap整体上来说还是灰常好用的，使用简单两行代码就可以替代掉第三方js的依赖

父容器：

scroll-snap-type: x proximity;
-webkit-overflow-scrolling: touch;
scroll-behavior: smooth;

子容器：

scroll-snap-align: start;
scroll-snap-stop: always;

支持情况

image.png

我是江河，前端实习生一枚，文章如有不正之处，敬请斧正！

avatar
文章
阅读
粉丝