ios苹果系统,js 滑动屏幕、锚定无效

现象:window.addEventListener监听touch无效,划不动屏幕,但是代码逻辑都有执行到。

scrollIntoView也无效。

原因:这是因为 iOS 的触摸事件处理机制和 touch-action: none 的设置有关。ios有太多得交互动作,从而会影响到touch监听

解决:

  1. 将 touch-action: none 改为 touch-action: pan-y,允许垂直方向的滑动
  2. 添加了passive: false 触摸事件阻止其它交互动作得覆盖
  3. 增加了滑动阈值(50px)来减少误触
  4. 在每次滑动后更新起始位置,使连续滑动更流畅
javascript 复制代码
 // 添加触摸事件支持
    window.addEventListener('touchstart', (e) => {
       
    }, { passive: true });

    window.addEventListener('touchmove', (e) => {
        
    }, { passive: false });

    window.addEventListener('touchend', () => {
        
    },  false );





.container {
    touch-action: pan-y;
}
相关推荐
liangshanbo12153 小时前
写好 React useEffect 的终极指南
前端·javascript·react.js
哆啦A梦15886 小时前
搜索页面布局
前端·vue.js·node.js
_院长大人_6 小时前
el-table-column show-overflow-tooltip 只能显示纯文本,无法渲染 <p> 标签
前端·javascript·vue.js
SevgiliD6 小时前
el-table中控制单列内容多行超出省略及tooltip
javascript·vue.js·elementui
要加油哦~6 小时前
JS | 知识点总结 - 原型链
开发语言·javascript·原型模式
哆啦A梦15887 小时前
axios 的二次封装
前端·vue.js·node.js
RollingPin7 小时前
iOS八股文之 RunLoop
ios·多线程·卡顿·ios面试·runloop·ios保活·ios八股文
阿珊和她的猫7 小时前
深入理解与手写发布订阅模式
开发语言·前端·javascript·vue.js·ecmascript·状态模式
yinuo7 小时前
一行 CSS 就能搞定!用 writing-mode 轻松实现文字竖排
前端
snow@li8 小时前
html5:拖放 / demo / 拖放事件(Drag Events)/ DataTransfer 对象方法
前端·html·拖放