V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
june4
V2EX  ›  前端开发

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

  •  
  •   june4 · 68 天前 · 466 次点击
    这是一个创建于 68 天前的主题,其中的信息可能已经有所发展或是发生改变。

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

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

    6 条回复    2024-03-13 16:08:15 +08:00
    monokuma88
        1
    monokuma88  
       68 天前
    hammerjs 监听手势、自己模拟类原生的滚动方案
    NerbraskaGuy
        2
    NerbraskaGuy  
       68 天前
    因为在 ios 里面这个属性是不生效的,chrome 才是正常表现
    paopjian
        3
    paopjian  
       68 天前
    是不是因为水平滑动触发了水平动作监听,结果再竖直滑动就调用不了了, 试试触摸监听所有操作?
    https://developer.mozilla.org/zh-CN/docs/Web/API/Touch_events
    好像 safari 不支持 touch event
    june4
        4
    june4  
    OP
       68 天前
    @paopjian https://developer.mozilla.org/en-US/docs/Web/CSS/touch-action
    touch-action 和这个有一点关系,但我没设置这个所以和这个问题无关。
    june4
        5
    june4  
    OP
       68 天前
    @monokuma88 自己写的滚动要做到原生那样丝滑有点不容易。且还要手动实现到边界回弹之类效果,貌似有点得不偿失。
    june4
        6
    june4  
    OP
       68 天前   ❤️ 2
    靠,解决了,在 DIV 上设置 overscroll-behavior: contain 可破。
    可能是滚动 DIV 水平滚动因为滚不动导致滚动功能传导到了上层 BODY 导致滚动锁定,后继划动不再在本 DIV 处理,设置这个属性不传导后可以随意上下滑了,不再有角度问题。
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   5515 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 26ms · UTC 02:03 · PVG 10:03 · LAX 19:03 · JFK 22:03
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.