移动端视图中Overflow Scroll无法正常工作的问题排查

问题原因 #

iOS上的所有浏览器（包括Chrome）都基于WebKit内核，对于设置了overflow-y: scroll的自定义滚动容器，默认不会启用原生滚动机制，导致无法触发滚动行为——桌面端无此限制是因为浏览器内核的滚动处理逻辑不同。

解决方法 #

给目标div添加-webkit-overflow-scrolling: touch样式，强制WebKit使用原生滚动引擎处理该元素，即可解决滚动失效问题。

修改后的完整代码 #

<div class="" style="height: 200px;width: 400px; overflow-y: scroll; -webkit-overflow-scrolling: touch; background: white;">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
  sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
  Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos
  et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna
  aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</div>

额外说明 #

• 该属性是WebKit私有属性，仅针对iOS设备生效，不会影响桌面端的滚动行为。
• Chrome DevTools模拟iOS设备时，同样遵循WebKit的规则，添加该属性后才能在模拟器中正常测试滚动。

内容的提问来源于stack exchange，提问作者thepandapi