JuneTT 2024-08-27 16:17 采纳率: 0%
浏览 6

h5页面ios端从其他元素滚到滚动元素,会卡住

#ios移动端safari浏览器h5页面
#从不可滚动的元素拖到可滚动的元素上,这时候可滚动的元素也不可滚动。需要点击一下屏幕才可以
解决思路
在容易误触的地方的进行以下处理
1.设置pointer-events事件为none 未解决
2.设置touch-action为none 未解决
3.js监听抬起位置,如果是误触document.body.click(); 未解决

  • 写回答

1条回答 默认 最新

  • 吃不了席 2024-08-27 17:19
    关注

    以下回复参考:皆我百晓生券券喵儿等免费微信小程序作答:

    针对这个问题,可以尝试以下解决方案:

    1. 在可滚动元素的父元素上设置pointer-events: none;,这样当用户从不可滚动的元素拖动到可滚动元素时,不会触发任何事件。但是这种方法可能会导致其他交互问题,因为它会阻止所有事件冒泡到父元素。

    2. 使用JavaScript监听触摸事件,当检测到误触时,手动触发点击事件。例如:

    document.body.addEventListener('touchstart', function(event) {
      // 判断是否为误触,这里可以根据实际需求进行判断
      if (isMistouch(event)) {
        // 如果是误触,触发点击事件
        document.body.click();
      }
    });
    
    function isMistouch(event) {
      // 根据实际需求判断是否为误触,例如判断触摸点的位置、触摸时间等
      // 返回true表示误触,false表示正常触摸
    }
    
    1. 如果以上方法仍然无法解决问题,可以考虑使用第三方库,如Hammer.js,它提供了更强大的触摸事件处理功能。
    评论

报告相同问题?

问题事件

  • 创建了问题 8月27日

悬赏问题

  • ¥15 CCF-CSP 2023 第三题 解压缩(50%)
  • ¥30 comfyui openpose报错
  • ¥20 Wpf Datarid单元格闪烁效果的实现
  • ¥15 图像分割、图像边缘提取
  • ¥15 sqlserver执行存储过程报错
  • ¥100 nuxt、uniapp、ruoyi-vue 相关发布问题
  • ¥15 浮窗和全屏应用同时存在,全屏应用输入法无法弹出
  • ¥100 matlab2009 32位一直初始化
  • ¥15 Expected type 'str | PathLike[str]…… bytes' instead
  • ¥15 三极管电路求解,已知电阻电压和三级关放大倍数