比如一个阅读器,使用了一个 overflow:auto 的全屏 div 来显示文本,这个滚动行为和不用 overflow:auto 靠原生的 body 滚动不同啊,用 div 的限制大,手指只能垂直,而 body 的甚至可以先水平划动再垂直划动照样能滚动。 在手机单手操作中,手指操持不是太垂直,容易滚不动。
Chrome 系有这个问题,iOS safari 没有这个差别。
1
monokuma88 266 天前
hammerjs 监听手势、自己模拟类原生的滚动方案
|
2
NerbraskaGuy 266 天前
因为在 ios 里面这个属性是不生效的,chrome 才是正常表现
|
3
paopjian 266 天前
是不是因为水平滑动触发了水平动作监听,结果再竖直滑动就调用不了了, 试试触摸监听所有操作?
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 靠,解决了,在 DIV 上设置 overscroll-behavior: contain 可破。
可能是滚动 DIV 水平滚动因为滚不动导致滚动功能传导到了上层 BODY 导致滚动锁定,后继划动不再在本 DIV 处理,设置这个属性不传导后可以随意上下滑了,不再有角度问题。 |