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;
}
相关推荐
linweidong6 分钟前
C++ 模块化编程(Modules)在大规模系统中的实践难点?
linux·前端·c++
leobertlan4 小时前
2025年终总结
前端·后端·程序员
子兮曰4 小时前
OpenClaw架构揭秘:178k stars的个人AI助手如何用Gateway模式统一控制12+通讯频道
前端·javascript·github
百锦再5 小时前
Reactive编程入门:Project Reactor 深度指南
前端·javascript·python·react.js·django·前端框架·reactjs
莲华君5 小时前
React快速上手:从零到项目实战
前端·reactjs教程
百锦再5 小时前
React编程高级主题:测试代码
android·前端·javascript·react.js·前端框架·reactjs
易安说AI5 小时前
Ralph Loop 让Claude无止尽干活的牛马...
前端·后端
2501_916008896 小时前
全面介绍Fiddler、Wireshark、HttpWatch、SmartSniff和firebug抓包工具功能与使用
android·ios·小程序·https·uni-app·iphone·webview
颜酱6 小时前
图结构完全解析:从基础概念到遍历实现
javascript·后端·算法
失忆爆表症7 小时前
05_UI 组件库集成指南:Shadcn/ui + Tailwind CSS v4
前端·css·ui