CSS scroll snap points 实现渐进增强的滚动

CloudDeveloper 发布于2019-08-29 10:59 / 985人阅读

摘要：渐近增强刚好最近看到这篇文章，如果结合每次滚动的时候每个条目始终在中间这样效果就更好了。效果如下查看浏览器支持情况遗憾的是目前只有和上的和原生支持需要前缀，好在这种可以当做渐进增强，即使浏览器不支持也不影响功能。

前言

前几天在 segmentfault 上看到有人问下面这个效果（segmentfault app 中的）怎么实现，感觉这个效果体验还不错（在移动端没有滚动条的情况能够提示有更多内容可以滚动），就用 overflow-x: auto + width: 80% 在 codepen 上写了个 demo。

渐近增强

刚好最近看到这篇文章 Introducing CSS Scroll Snap Points ，如果结合 Scroll snap points 每次滚动的时候每个条目始终在中间这样效果就更好了。

.snap-slider {
    overflow-x: auto;
    
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: mandatory;

  scroll-snap-destination: 50% 0;
    &__scroller {
        display: table;
        text-align: center;
    }
    &__item {
        scroll-snap-coordinate: 50% 0%;
        
        display: table-cell;
        line-height: 150px; font-size: 2em;
        
        &:not(:first-child) {
            border-left: 1px solid #ccc;
        }
    }
    &__width {
        width: 80vw;
    }
}

属性的具体介绍，参考本文最后的参考链接。

效果如下：

查看 Demo

浏览器支持情况

遗憾的是目前(7/9/2016)只有 Firefox 和 iOS 上的 Safari 和 Chrome 原生支持（需要前缀），好在这种可以当做渐进增强，即使浏览器不支持也不影响功能。

PS：这里有个 polyfill，但是本例中加了似乎不起作用。

参考

https://css-tricks.com/introducing-css-scroll-snap-points/

https://webkit.org/blog/4017/scroll-snapping-with-css-snap-points/

http://codepen.io/collection/XjOwrq/

原文地址：https://uedsky.com/2016-07/css-scroll-snap-points/
获取最佳阅读体验并参与讨论，请访问原文

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/111347.html

译-使用Scroll Snapping实现CSS控制页面滚动

摘要：过去滚动捕捉只能通过实现，但现在得益于新的滚动捕捉模块，这种效果已经可以通过实现了。同时令人庆幸的是浏览器可以根据用户的滚动方式自动控制并判断是否利用捕捉点捕捉。特别声明，本文翻译自@alligatorio的Control Page Scroll in CSS Using Scroll Snapping一文，受限于译者能力，译文或存在不足，欢迎大家指出。如需转载，烦请注明出处。滚...

lastSeries 2019-08-02 11:50 评论0 收藏0
译-使用Scroll Snapping实现CSS控制页面滚动

摘要：过去滚动捕捉只能通过实现，但现在得益于新的滚动捕捉模块，这种效果已经可以通过实现了。同时令人庆幸的是浏览器可以根据用户的滚动方式自动控制并判断是否利用捕捉点捕捉。特别声明，本文翻译自@alligatorio的Control Page Scroll in CSS Using Scroll Snapping一文，受限于译者能力，译文或存在不足，欢迎大家指出。如需转载，烦请注明出处。滚...

Tychio 2019-08-29 17:06 评论0 收藏0
JS进阶篇--iscroll.js的使用

摘要：最好给浏览器或者毫秒的间隙再去初始化。他们控制滚动周期毫秒级别和动画的擦除效果。重新绘制阶段不是瞬时发生的只是范围结束时触发。注如果你有一个相当复杂的结构，你应该给浏览器更多的执行事件，可以设置到毫秒的超时时间。使用方法注册事件。入门 Scroll是一个类，每个需要使用滚动功能的区域均要进行初始化。每个页面上的iScroll实例数目在设备的CPU和内存能承受的范围内是没有限制的。尽...

Genng 2019-08-21 10:37 评论0 收藏0
Iscroll解析

摘要：处理函数处理函数都是和检测事件对应的，每一类检测事件都有相应的处理函数。为时，会将等事件绑定到的对象。可通过对进行销毁。注册事件，可注册的函数类型为下一小节函数。做了一些移动端的产品，发现一些滚动效果很多会使用 iscroll 作为底层库（如阿里小蜜）。iscroll 的文档已经好久没更新了，而且比较简单，经常需要直接读源码。这里写一篇总结，作为对 iscroll API的整理。而 ...

weapon 2019-08-19 18:32 评论0 收藏0