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;
}
相关推荐
程序员鱼皮2 分钟前
前特斯拉 AI 总监:AI 编程最大的谎言,是 “提效”
前端·后端·ai·程序员·开发
pusheng202514 分钟前
普晟传感2026年新春年会总结与分析
前端·javascript·html
谢尔登15 分钟前
React19事件调度的设计思路
前端·javascript·react.js
Emma_Maria25 分钟前
本地项目html和jquery,访问地址报跨域解决
前端·html·jquery
Digitally26 分钟前
如何轻松地将大型音频文件从 iPhone 发送到不同的设备
ios·iphone
奋斗吧程序媛30 分钟前
常用且好用的命令
前端·编辑器
2301_7965125234 分钟前
【精通篇】打造React Native鸿蒙跨平台开发高级复合组件库开发系列:Lazyload 懒加载(懒加载的图片)
前端·javascript·react native·react.js·ecmascript·harmonyos
敲敲了个代码40 分钟前
从N倍人力到1次修改:Vite Plugin Modular 如何拯救多产品前端维护困境
前端·javascript·面试·职场和发展·typescript·vite
摘星编程43 分钟前
OpenHarmony环境下React Native:Timeline时间轴组件
javascript·react native·react.js
摘星编程1 小时前
在OpenHarmony上用React Native:Timeline水平时间轴
javascript·react native·react.js