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;
}
相关推荐
AI浩7 小时前
【Labelme数据操作】LabelMe标注批量复制工具 - 完整教程
运维·服务器·前端
涔溪8 小时前
CSS 网格布局(Grid Layout)核心概念、基础语法、常用属性、实战示例和进阶技巧全面讲解
前端·css
2401_878454538 小时前
浏览器工作原理
前端·javascript
西陵8 小时前
为什么说 AI 赋能前端开发,已经不是选择题,而是必然趋势?
前端·架构·ai编程
by__csdn9 小时前
Vue3 setup()函数终极攻略:从入门到精通
开发语言·前端·javascript·vue.js·性能优化·typescript·ecmascript
天天扭码10 小时前
前端如何实现RAG?一文带你速通,使用RAG实现长期记忆
前端·node.js·ai编程
Luna-player10 小时前
在前端中,<a> 标签的 href=“javascript:;“ 这个是什么意思
开发语言·前端·javascript
lionliu051910 小时前
js的扩展运算符的理解
前端·javascript·vue.js
小草cys10 小时前
项目7-七彩天气app任务7.4.2“关于”弹窗
开发语言·前端·javascript
奇舞精选10 小时前
GELab-Zero 技术解析:当豆包联手中兴,开源界如何守住端侧 AI 的“最后防线”?
前端·aigc