第一次听说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-type和scroll-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-destination和scroll-snap-coordinate，W3C只给了部分代码，有的实现得了有的实现不了，我英文又烂，等我会了再写demo好了。
不过我上面提供的demo，肯定是实用性最强的了，欢迎也把你们项目里的横向商品滚动优化一下吧。
最后是Safari 9的更新日志链接：https://developer.apple.com/library/prerelease/ios/releasenotes/General/WhatsNewInSafari/Articles/Safari_9.html
亲测 IOS 9.2 微信6.3.5 支持
IOS9.1 打错了
又试了一下，依旧无效。
iPhone 5s，iOS 9.1，微信6.3.5
iPhone 6s Plus，iOS 9.1，微信6.3.5
的确有点厉害哈~~
西门好，这篇文章很有用，谢谢了