标签搜索
隐藏侧边栏

scroll-snap-type优化滚动

搞前端的半夏
2022-05-17 / 0 评论 / 0 点赞 / 236 阅读 / 2,141 字 / 正在检测是否收录...
温馨提示:
本文最后更新于 2022-05-17,若内容或图片失效,请留言反馈。部分素材来自网络,若不小心影响到您的利益,请联系我们删除。

大家好,我是半夏👴,一个刚刚开始写文的沙雕程序员.如果喜欢我的文章,可以关注➕ 点赞 👍 加我微信:frontendpicker,一起学习交流前端,成为更优秀的工程师~关注公众号:搞前端的半夏,了解更多前端知识! 点我探索新世界!

前言

相信每个写CSS的前端人,都会跟滚动打交道。滚动即当元素内部的内容太大超出的时候,元素该怎么做。主要是使用overflow来进行设置。今天在制作横向滚动,展示公司产品的时候,遇到了这样一个问题:当用户滚动的,停下来,定位可能是并不是在某一个产品,显示不全。效果:最后停在的位置是在两个猫咪的中间,两个小猫都看不全。

image-20211123204844712

有没有什么方法,当用户滚动停下来的时候,可以自动选择其中的一个猫咪,放在中间。一开始我是使用js来做的。需要监听元素滚动,然后再判断滚动停止,再计算位置,贼麻烦。感觉自己是个假前端。既然是css的问题,我最终还是决定用CSS的方法解决。

scroll snap

在MDN上我找到了这个可以解决我问题的CSS属性:scroll snap

image-20211123210240348

scroller snap 目前支持scroll-snap-type和scroll-snap-align两个属性。scroll-snap-type用于容器,定义滚动的方向和类型。scroll-snap-align用于子元素,定义滚动停止后,子元素的对齐方式。

用法

scroll-snap-align

三个属性值:

start

当滚动停止时,浏览器会自动滚动到子元素在框内的起始位置

image-20211123214024687

end

当滚动停止时,浏览器会自动滚动到子元素在框内的结束位置

center

当滚动停止时,浏览器会自动滚动到子元素在框内的中点位置

image-20211123214109563

scroll-snap-type

具体的属性值可以查看:https://developer.mozilla.org/zh-CN/docs/Web/CSS/scroll-snap-type

这里我只想聊聊mandatory和proximity

mandatory:比较好理解:当用户停止滚动的时候,会自动选择一个子元素的点。

proximity:只有用户滚动到接近到足够的值的时候,才会选择一个子元素的点进行滚动。感觉有点难以理解:

举个例子来说:一个200px 宽的容器,内部有多个宽200px子元素横向滚动,设置子元素 scroll-snap-align: center;容器scroll-snap-type: x proximity;

仔细观察下图:当我拖动滚动条的时候,在某个位置,并没有发生滚动,说明这个位置还没有到足够的值。我实测,当我的滚动位置超过红点并且超过边框的时候,会自动滚动。但是位于箭头的区域并不会发生滚动。在这个例子中的临界值就就是红色的边框位置,大概150px的位置。

image-20211123215007641

完整案例

定义容器,使用flex布局,让元素横向排列。然后定义x轴滚动。注意这里 overscroll-behavior-x: contain;这个属性的效果是,当容器滚动头,并不会导致浏览器滚动(浏览器x轴有滚动)

.container {
    display: flex;
    flex-direction: row;
    height: 200px;
    padding: 1rem;
    width: 200px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
}

div{
    margin:10px;
    scroll-snap-align: center;
}

img {
    width: 180px;
    max-width: none;
    object-fit: contain;
    border-radius: 1rem;
}
<div class="container">
    <div href="#"><img src="1.jpeg" /></div>
    <div href="#"><img src="2.jpeg" /></div>
    <div href="#"><img src="3.jpeg" /></div>
    <div href="#"><img src="4.jpeg" /></div>
    <div href="#"><img src="5.jpeg" /></div>
    <div href="#"><img src="2.jpeg" /></div>
    <div href="#"><img src="3.jpeg" /></div>
    <div href="#"><img src="4.jpeg" /></div>
</div>
0

评论区