移动浏览器，在正常的长页面，手指可以以有点水平的角度上下滚动页面，然而在一个 overflow:auto 的 div 里，手指只能比较严格的垂直于页面才能上下滚动，怎么解决这个问题呢？
june4 2024-03-13 11:25:47 +08:00 1122 次点击这是一个创建于 657 天前的主题，其中的信息可能已经有所发展或是发生改变。
比如一个阅读器，使用了一个 overflow:auto 的全屏 div 来显示文本，这个滚动行为和不用 overflow:auto 靠原生的 body 滚动不同啊，用 div 的限制大，手指只能垂直，而 body 的甚至可以先水平划动再垂直划动照样能滚动。 在手机单手操作中，手指操持不是太垂直，容易滚不动。
Chrome 系有这个问题，iOS safari 没有这个差别。
 | 1 monokuma88 2024-03-13 14:52:07 +08:00 hammerjs 监听手势、自己模拟类原生的滚动方案 |
 | 2 NerbraskaGuy 2024-03-13 15:03:19 +08:00 因为在 ios 里面这个属性是不生效的，chrome 才是正常表现 |
 | 3 paopjian 2024-03-13 15:34:49 +08:00 是不是因为水平滑动触发了水平动作监听,结果再竖直滑动就调用不了了, 试试触摸监听所有操作? 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