# 关于 iOS 手机滚动的问题 `-webkit-overflow-scrolling` 究竟是什么鬼？ 一个只有 iOS 设备支持的非标准属性。苹果自己的解释：指定是否在 overflow: scroll 的元素中使用“原生”的滚动方式 他包含两个可选值：auto 和 touch - auto：就是普通的无惯性滚动效果 - touch：原生的滚动效果。使用此效果会构造一个 stacking context 什么是 stacking context？这可以说是CSS里一个阴暗面，极其晦涩。有兴趣的朋友可以去看高人的解释 : https://segmentfault.com/a/1190000002783265 ## -webkit-overflow-scrolling 引发了那些坑？ 下面列出我遇到过的坑： ### 滚动中 scrollTop 属性不会变化。 严格来说，上面的 scroll 事件不触发只是本坑的一个副作用，所以说不必考虑通过 touchmove 事件转发 scroll 事件等点子，scroll 事件触发了一样检测不到 scrollTop 属性的变化（当然检测手指的移动距离另说）。同样，检测滚动区域内部元素的 getBoundingClientRect 同样无效。 例中起了一个无限的rAF循环不停地获取 scrollTop 的值，然并卵。 ### 手势可穿过其他元素触发元素滚动 这个更奇葩。例中用一个半透明的 div 盖在了滚动区域 ul 上面（实践中可能是一个弹框的背部蒙版），甚至给 ul 自己加上了 pointer-events: none，手指在 div 上滑动仍然会触发 ul 的滚动。你可以在显示半透明蒙版时将 ul 的 -webkit-overflow-scrolling: touch 或 overflow: scroll 去掉，但是会造成屏幕明显的闪烁。如果给 body 的 touchmove事件 preventDefault() 可以防止触发滚动，但是是所有滚动区域都会失效。 ### 运行时通过 JS 动态添加元素溢出高度导致滚动失效 Google 上一搜一片，但是笔者没有遇到过，或许在新版本系统中已经修正，这里不展开讨论。 ### 滚动时暂停其他 transition ## 参考资料 [iOS 与 惯性滚动](http://www.cnblogs.com/chris-oil/p/6164966.html) [CSS Stacking Context 里那些鲜为人知的坑](https://segmentfault.com/a/1190000002783265)