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. 在每次滑动后更新起始位置,使连续滑动更流畅

 // 添加触摸事件支持window.addEventListener('touchstart', (e) => {}, { passive: true });window.addEventListener('touchmove', (e) => {}, { passive: false });window.addEventListener('touchend', () => {},  false );.container {touch-action: pan-y;
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.pswp.cn/web/82918.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Redis主从复制原理二 之 主从复制工作流程

概述 本文紧接「Redis主从复制的原理一 之 概述」,详细介绍了Redis的主从服务过程及原理。 主从复制工作流程 主从复制过程大体可以分为3个阶段: 建立连接阶段(即准备阶段)数据同步阶段命令传播阶段 阶段一:建立连接阶…

Markdown基础(1.2w字)

1. Markdown基础 这次就没目录了,因为md格式太乱了写示例,展示那些都太乱了,导致目录很乱。 (我是XX,出现了很多错误,有错误和我说) 1.1 Markdown简介 Markdown是一种轻量级的标记语言&#…

JAVA-springboot log日志

SpringBoot从入门到精通-第8章 日志的操作 一、Spring Boot默认的日志框架 SpringBoot支持很多种日志框架,通常情况下,这些日志框架都是由一个日志抽象层和一个日志实现层搭建而成的,日志抽象层是为记录日志提供的一套标准且规范的框架&…

Vue 渲染 Markdown 文件完全指南

前言 大家好,我是一诺,今天分享的是vue中渲染markdown文件。这是一个常见的需求,比如用户隐私协议页、技术说明等文档页面~ 本文将详细介绍如何在 Vue 中渲染 Markdown 文件,并美化代码块的显示效果。 基础概念 什么是 Markdo…

Science Robotics:UCLA 贺曦敏团队综述自主软体机器人

在机器人中实现类似生命的自主性一直是研究的方向,但目前大多数软体机器人仍依赖外部刺激操控来产生持续运动。为了实现能够自我调节感知 、 决策和驱动的自主物理智能(autonomous physical intelligence,API),一种有前…

基于LangChain构建高效RAG问答系统:向量检索与LLM集成实战

基于LangChain构建高效RAG问答系统:向量检索与LLM集成实战 在本文中,我将详细介绍如何使用LangChain框架构建一个完整的RAG(检索增强生成)问答系统。通过向量检索获取相关上下文,并结合大语言模型,我们能够…

【Java学习笔记】SringBuffer类(重点)

StringBuffer(重点) 1. 基本介绍 (1)StringBuffer是可变的字符序列,可以对字符串内容惊醒增删 (2)很多方法喝String相同,但StringBuffer可变长度 (3)Strin…

计算机网络领域所有CCF-A/B/C类期刊汇总!

本期小编统计了【计算机网络】领域CCF推荐所有期刊的最新影响因子,分区、年发文量以及投稿经验,供大家参考! CCF-A类 1 IEEE Journal on Selected Areas in Communications 【影响因子】13.8 【期刊分区】JCR1区,中科院1区TOP …

AI-Sphere-Butler之如何启动AI全能管家教程(WSL测试环境下适用)

环境: Ubuntu20.04 WSL2 问题描述: AI-Sphere-Butler之如何启动AI全能管家教程(WSL测试环境下适用) 解决方案: 打开管家大模型 1.运行大模型在cmd下输入: ollama run qwen2.5-3bnsfwny运行管家 数字人运行脚本&#xff…

【python深度学习】Day 47 注意力热图可视化

知识点:热力图 作业:对比不同卷积层热图可视化的结果 一、概念 为了方便观察输出,将特征图进行可视化。特征图本质就是不同的卷积核的输出,浅层指的是离输入图近的卷积层,浅层卷积层的特征图通常较大,而深层…

C#语音识别:使用Whisper.net实现语音识别

C#语音识别:使用Whisper.net实现语音识别 在当今数字化时代,语音识别技术已广泛应用于智能助手、语音转文字、会议记录等众多领域。对于 C# 开发者而言,如何快速、高效地实现语音识别功能呢?今天,我们就来介绍一个强大…

开源分享|适合初创商家的餐饮系统,基于thinkphp8+element-plus

一、项目介绍 三勾餐饮点餐连锁版系统是一个基于thinkphp8element-plusuniapp打造的面向开发的小程序商城的全面解决方案,旨在为连锁餐饮企业提供高效的点餐与管理服务。该系统支持多端应用发布,包括微信小程序、H5、安卓及iOS平台,实现数据…

rec_pphgnetv2完整代码学习(一)

rec_pphgnetv2是paddleocr_v5中的重要改进,因此对其完整代码进行学习十分之有必要。 一、IdentityBasedConv1x1 这段代码定义了 IdentityBasedConv1x1 类,它是 PaddleOCRv5 中 rec_pphgnetv2 模型的关键改进之一。该层通过将恒等映射(Ident…

vue3+dify从零手撸AI对话系统

vue3dify从零手撸AI对话系统 前言 近年来,人工智能技术呈现爆发式增长,其应用已深度渗透至各行各业。甚至家里长辈们也开始借助AI工具解决日常问题。作为程序员群体,我们更应保持技术敏锐度,紧跟这波浪潮。 回溯求学时期&#xf…

robot_lab train的整体逻辑

Go2机器人推理(Play)流程详细分析 概述 本文档详细分析了使用命令 python scripts/rsl_rl/base/play.py --task RobotLab-Isaac-Velocity-Rough-Unitree-Go2-v0 进行Go2机器人推理的完整流程,基于实际的代码实现,包括模型加载、环境配置调整、推理循环…

Python Day45

Task: 1.tensorboard的发展历史和原理 2.tensorboard的常见操作 3.tensorboard在cifar上的实战:MLP和CNN模型 效果展示如下,很适合拿去组会汇报撑页数: 作业:对resnet18在cifar10上采用微调策略下,用tens…

MySQL SQL 优化:从 INSERT 到 LIMIT 的实战与原理

在数据库驱动的现代应用中,SQL 查询的性能直接决定了用户体验和系统效率。本文将深入探讨 MySQL (特别是 InnoDB 存储引擎)中常见的 SQL 性能瓶颈,并结合实际案例,详细剖析从数据插入到复杂分页查询的优化策略与底层实…

SQL 基础入门

SQL 基础入门 SQL(全称 Structured Query Language,结构化查询语言)是用于操作关系型数据库的标准语言,主要用于数据的查询、新增、修改和删除。本文面向初学者,介绍 SQL 的基础概念和核心操作。 1. 常见的 SQL 数据…

HTTP 请求协议简单介绍

目录 常见的 HTTP 响应头字段 Java 示例代码:发送 HTTP 请求并处理响应 代码解释: 运行结果: 文件名: 总结: HTTP(HyperText Transfer Protocol)是用于客户端与服务器之间通信的协议。它定…

《100天精通Python——基础篇 2025 第5天:巩固核心知识,选择题实战演练基础语法》

目录 一、踏上Python之旅二、Python输入与输出三、变量与基本数据类型四、运算符五、流程控制 一、踏上Python之旅 1.想要输出 I Love Python,应该使用()函数。 A.printf() B.print() C.println() D.Print() 在Python中想要在屏幕中输出内容,应该使用print()函数…