IOS系统浏览器惯性滚动“-webkit-overflow-scrolling:touch”的影响

-webkit-overflow-scrolling 究竟是什么鬼？

一个只有 iOS 设备支持的非标准属性。苹果自己的解释：指定是否在 overflow: scroll 的元素中使用“原生”的滚动方式

他包含两个可选值：auto 和 touch

auto：就是普通的无惯性滚动效果

touch：原生的滚动效果。使用此效果会构造一个 stacking context

什么是 stacking context？这可以说是CSS里一个阴暗面，极其晦涩。有兴趣的朋友可以去看高人的解释，这里不做讨论。

为什么需要惯性滚动

-webkit-overflow-scrolling : touch，它是一个只有 iOS 设备支持的非标准属性。

好处呢，就是两个字：流畅。

该属性，会让iOS浏览器的滚动区域，变得特别流畅，媲美原生APP的滚动效果，以至于在H5的滚动区域，都会添加这个属性。

不得不说，惯性滚动大大的提升了用户的体验，也提升了H5页面的逼格，所以就算是开发人员，都无法说服自己，不去使用这个属性。

事物总是会带有双面性的不是么，没有任何一件事，只有好的一面，如果有，那么就说么，你与这个事情的亲密度不够。

惯性滚动也是，而与惯性滚动最为亲密的人，就属于H5的前端开发者，接下来，我们来看看，惯性滚动，会有哪些影响，甚至哪些可以被认为算是BUG呢。

那么惯性滚动带来的影响有哪些？

1：click事件

当处于惯性滚动时，click事件将不起作用，或者更确切的说，click事件，将会被认为是，强制滚动停止的事件。

如果在惯性滚动的过程中，手指进行一次点击，那么不会触发对应元素的click事件，而是会停止当前的惯性滚动，这个也是属于正常的吧，我们完全可以接受。

2：touchend触发之后，滚动并没有停止

作为前端的开发者来说，一些频繁触发重绘，重排，高频计算的JS方法，应该是尽量避免的，毕竟我们并不确定，我们的用户，使用的什么样的手机。

尽量的避免占用内存的量，降低手机性能损耗，也是很重要的，说到这里的时候，相信很多人，都想起了一个效果：滚动加载。

相信也有不少人，尝试过，使用touchend事件，来实现滚动加载，但是当我们使用了惯性滚动这个属性之后，这个方案，就被彻底否决了，因为当元素处于惯性滚动的时候，是已经触发了touchend事件了。

3：scrollTop的问题

有文章说：当页面处于惯性滚动时，scrollTop的值是不变的，我进行了尝试，发现根本没有这个问题，我大概猜想当时的作者是为什么有这么一个结论：

原因可能是：在touch事件中，去计算scrollTop的值。

这个问题，就可以看前一条：当处于惯性滚动的时候，其实touch事件，已经都被触发过了，不会在惯性滚动的时候，触发touch事件了，既然都不会触发事件了，那么计算scrollTop的代码都不会被执行了，所以无法获得scrollTop的值，也是正常的啊。

那么有没有什么好的解决方案？

使用 WKWebView 替换 UIWebView 内核

可能有些读者已经发现，scroll 事件不能触发的坑在 iOS Safari 和 iOS Chrome 浏览器中不存在，为什么呢？这里要从 iOS 上浏览器的发展史说起。

由于苹果公司对安全性等原因的考虑，苹果公司静止第三方浏览器在 iOS 设备上使用自己的浏览器的内核，换句话说，使用自己内核的浏览器都被禁止上架 AppStore。各大厂商无奈，于是长久以来，包括 Chrome 在内的所有第三方浏览器，都只是使用 iOS 系统内置的浏览器控件包一层外壳，这个控件就是 UIWebView。这个 UIWebView 不仅速度差，HTML5 支持率低，占用内存高，还有各种各样奇怪的问题。然而苹果公司却给自己的 Safari 浏览器开了后门。首先 Safari 使用的支持 JIT 编译的 JS 引擎内核 Nitro 比 UIWebView 里老旧的解释性 JavaScriptCore 内核速度搞数倍，然后 HTML5 支持度也比 UIWebView 高，还少了某些奇葩bug。久而久之就形成了 iOS 设备上 Safari 浏览器全面碾压其他第三方浏览器的现象。

在乔帮主撒手人寰不久之后，苹果公司口气终于松动，虽然没有放开第三方浏览器内核的限制，但把 Safari 的浏览器内核提取了出来开放第三方浏览器使用，那就是如今的 WKWebView（WK 即 Webkit 的缩写）。但由于 WKWebView 只支持 iOS8 以上系统，各大浏览器厂商并未立刻跟进。直到最近的 iOS9 时代，Chrome 成为第一个吃螃蟹的 APP，使用了 WKWebView 内核。测试数据表明，使用 WKWebView 内核的 Chrome 浏览器在速度和 HTML5 支持率上已经与 Safari 浏览器不相上下。紧接着 Mozilla 公司宣布 Firefox 登录 iOS 平台，使用的也是 WKWebView 内核（于是有了第一款基于 Webkit 内核的火狐浏览器）

不知苹果做了什么手脚，也许苹果的开发人员认为 WKWebView 的效能已经足以支撑在 scroll 事件中执行额外代码而不造成 UI 卡顿，总之在 WKWebView 内核中滚动可以正常触发 scroll 事件，当然也能正常获得 scrollTop 的值。

深正互联：致力于高端网页开发，自适应响应式Web开发，App开发，微信小程序定制设计，欢迎您关注我们，请记得网址www.szhulian.com （品牌关键词：深正互联）