移动浏览器，在正常的长页面，手指可以以有点水平的角度上下滚动页面，然而在一个 overflow:auto 的 div 里，手指只能比较严格的垂直于页面才能上下滚动，怎么解决这个问题呢？
june4 · 240 天前 · 680 次点击这是一个创建于 240 天前的主题，其中的信息可能已经有所发展或是发生改变。
比如一个阅读器，使用了一个 overflow:auto 的全屏 div 来显示文本，这个滚动行为和不用 overflow:auto 靠原生的 body 滚动不同啊，用 div 的限制大，手指只能垂直，而 body 的甚至可以先水平划动再垂直划动照样能滚动。 在手机单手操作中，手指操持不是太垂直，容易滚不动。
Chrome 系有这个问题，iOS safari 没有这个差别。
6 条回复 • 2024-03-13 16:08:15 +08:00
 |
1
monokuma88 240 天前
hammerjs 监听手势、自己模拟类原生的滚动方案
|
 |
2
NerbraskaGuy 240 天前
因为在 ios 里面这个属性是不生效的，chrome 才是正常表现
|
 |
3
paopjian 240 天前
是不是因为水平滑动触发了水平动作监听,结果再竖直滑动就调用不了了, 试试触摸监听所有操作?
https://developer.mozilla.org/zh-CN/docs/Web/API/Touch_events 好像 safari 不支持 touch event |
 |
4
june4 OP @paopjian https://developer.mozilla.org/en-US/docs/Web/CSS/touch-action
touch-action 和这个有一点关系，但我没设置这个所以和这个问题无关。 |
|
5
june4 OP @monokuma88 自己写的滚动要做到原生那样丝滑有点不容易。且还要手动实现到边界回弹之类效果，貌似有点得不偿失。
|
|
6
june4 OP  2
靠，解决了，在 DIV 上设置 overscroll-behavior: contain 可破。
可能是滚动 DIV 水平滚动因为滚不动导致滚动功能传导到了上层 BODY 导致滚动锁定，后继划动不再在本 DIV 处理，设置这个属性不传导后可以随意上下滑了，不再有角度问题。 |
Select Language