移动浏览器，在正常的长页面，手指可以以有点水平的角度上下滚动页面，然而在一个 overflow:auto 的 div 里，手指只能比较严格的垂直于页面才能上下滚动，怎么解决这个问题呢？

[june4]

比如一个阅读器，使用了一个 overflow:auto 的全屏 div 来显示文本，这个滚动行为和不用 overflow:auto 靠原生的 body 滚动不同啊，用 div 的限制大，手指只能垂直，而 body 的甚至可以先水平划动再垂直划动照样能滚动。 在手机单手操作中，手指操持不是太垂直，容易滚不动。

Chrome 系有这个问题，iOS safari 没有这个差别。

[monokuma88]

hammerjs 监听手势、自己模拟类原生的滚动方案

[NerbraskaGuy]

因为在 ios 里面这个属性是不生效的，chrome 才是正常表现

[paopjian]

是不是因为水平滑动触发了水平动作监听,结果再竖直滑动就调用不了了, 试试触摸监听所有操作?
https://developer.mozilla.org/zh-CN/docs/Web/API/Touch_events
好像 safari 不支持 touch event

[june4]

@paopjian https://developer.mozilla.org/en-US/docs/Web/CSS/touch-action
touch-action 和这个有一点关系，但我没设置这个所以和这个问题无关。

[june4]

@monokuma88 自己写的滚动要做到原生那样丝滑有点不容易。且还要手动实现到边界回弹之类效果，貌似有点得不偿失。

[june4]

靠，解决了，在 DIV 上设置 overscroll-behavior: contain 可破。
可能是滚动 DIV 水平滚动因为滚不动导致滚动功能传导到了上层 BODY 导致滚动锁定，后继划动不再在本 DIV 处理，设置这个属性不传导后可以随意上下滑了，不再有角度问题。