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;
}
相关推荐
小小小小宇17 分钟前
React 的 DOM diff笔记
前端
小小小小宇24 分钟前
react和vue DOM diff 简单对比
前端
我在北京coding26 分钟前
6套bootstrap后台管理界面源码
前端·bootstrap·html
Carlos_sam30 分钟前
Opnelayers:封装Popup
前端·javascript
MessiGo1 小时前
Javascript 编程基础(5)面向对象 | 5.1、构造函数实例化对象
开发语言·javascript·原型模式
前端小白从0开始1 小时前
Vue3项目实现WPS文件预览和内容回填功能
前端·javascript·vue.js·html5·wps·文档回填·文档在线预览
JohnYan1 小时前
Bun技术评估 - 03 HTTP Server
javascript·后端·bun
开开心心就好2 小时前
高效Excel合并拆分软件
开发语言·javascript·c#·ocr·排序算法·excel·最小二乘法
難釋懷2 小时前
Vue解决开发环境 Ajax 跨域问题
前端·vue.js·ajax