主机格调

第一次听说CSS Scroll Snap Points的时候,是在微博里看到的一个gif图:

当时看到后,瞬间感觉CSS惊为天人啊!以前这种轮播必须要用js来写的,现在居然CSS都可以实现!立马搜了下相关代码,写了个demo,发现只有最新版火狐支持,为此还把火狐给更新了一下。体验完了也就完了,因为我主要负责移动端页面,手机里没几个人用火狐。

前几天看到《iOS 9对前端做了什么?》这篇文章,发现iOS 9居然也支持了这玩意儿,终于可以登场发挥啦!立马把我们的首页优化了下,不过暂时还没上线。那么就写个→DEMO←给大家试试他的厉害吧!

注意:本DEMO只支持iOS 9以上的Safari浏览器,iOS 9里的其他浏览器例如微信、UC等都不支持,不知道为什么。Android全部不兼容。

由于国人还没有写过CSS Scroll Snap Points相关的技术文章,我英文不好,不知道中文如何翻译,那就直译为“CSS滚动卡点”吧。

这里主要只用了其中2个属性:scroll-snap-typescroll-snap-points-*,从字面意思就可以理解scroll-snap-type指定类型mandatory强制,scroll-snap-points-*指定*轴的滚动距离。上面例子里,全屏的是scroll-snap-points-y: repeat(100%);,纵向滚动一下就滚一屏。中间彩色的小块宽度120px,间距10px,如果要设置每次横向滚动2块,那就是(120+10)*2=260px,设置成scroll-snap-points-x: repeat(260px);,非常容易理解。

另外还有两个属性scroll-snap-destinationscroll-snap-coordinateW3C只给了部分代码,有的实现得了有的实现不了,我英文又烂,等我会了再写demo好了。

不过我上面提供的demo,肯定是实用性最强的了,欢迎也把你们项目里的横向商品滚动优化一下吧。

最后是Safari 9的更新日志链接:https://developer.apple.com/library/prerelease/ios/releasenotes/General/WhatsNewInSafari/Articles/Safari_9.html

>>原创文章,欢迎转载。转载请注明:转载自西门的后花园,谢谢!
>>原文链接地址:http://ons.me/535.html