移动端滚动穿透与滚动溢出解决方案

滚动穿透

图片

问题描述

在移动端 WEB 开发的时候(小程序也雷同),如上录屏所示,如果页面超过一屏高度出现滚动条时,在 fixed 定位的弹窗遮罩层上进行滑动,它下面的内容也会跟着一起滚动,看起来好像事件穿透到下面的DOM元素上一样,我们姑且称之为滚动穿透。

问题原因

能够猜想是文档(document)的滚动事件被触发了,如果能禁用滚动事件就好办了。

案例伪代码

<div class="btn">点击出现弹窗</div><div class="popup"><div class="popup-mask"></div><div class="popup-body popup-bottom"><div class="header">我是标题</div><div class="content"><div>0</div>        <div>1</div><div>...</div></div></div>
</div>
.popup-mask {background-color: rgba(0, 0, 0, 0.5);position: fixed;z-index: 998;top: 0;bottom: 0;left: 0;right: 0;
}.popup-body {padding: 0 50px 40px;background-color: #fff;position: fixed;z-index: 999;
}

✅ 解决方案A (touch-action)

默认情况下,平移(滚动)和缩放手势由浏览器专门处理,但是可以通过 CSS 特性 touch-action 来改变触摸手势的行为。摘取几个 touch-action 的值如下。

描述
auto启用浏览器处理所有平移和缩放手势。
none禁用浏览器处理所有平移和缩放手势。
manipulation启用平移和缩放手势,但禁用其他非标准手势,例如双击缩放。
pinch-zoom启用页面的多指平移和缩放。

于是在 popup 元素上设置该属性,禁用元素(及其不可滚动的后代)上的所有手势就可以解决该问题了。

.popup {touch-action: none;
}

Note: [无障碍设计] 阻止页面缩放可能会影响视力不佳的人阅读和理解页面内容,不过小程序本身好像就不可以缩放!

✅ 解决方案B (event.preventDefault)

来自 W3C 的一个标准。

图片

大意是说,在 touchstart 和 touchmove 事件中调用 preventDefault 方法可以阻止任何关联事件的默认行为,包括鼠标事件和滚动。

因此我们可以这样处理。
Step 1、监听弹窗最外层元素(popup)的 touchmove 事件并阻止默认行为来禁用所有滚动(包括弹窗内部的滚动元素)。
Step 2、释放弹窗内的滚动元素,允许其滚动:同样监听 touchmove 事件,但是阻止该滚动元素的冒泡行为(stopPropagation),使得在滚动的时候最外层元素(popup)无法接收到 touchmove 事件。

const popup = document.querySelector('.popup')
const scrollBox = document.querySelector('.content')popup.addEventListener('touchmove', (e) => {// Step 1: 阻止默认事件e.preventDefault()
})scrollBox.addEventListener('touchmove', (e) => {// Step 2: 阻止冒泡e.stopPropagation()
})

滚动溢出

图片

问题描述

如上录屏所示,弹窗内也含有滚动元素,在滚动元素滚到底部或顶部时,再往下或往上滚动,也会触发页面的滚动,这种现象称之为滚动链(scroll chaining), 但是感觉滚动溢出(overscroll)这个名字更言辞达意。

❌ 解决方案A (overscroll-behavior)

overscroll-behavior 是 CSS 的一个特性,允许控制浏览器滚动到边界的表现,它有如下几个值。

描述
auto默认效果,元素的滚动可以传播到祖先元素。
contain阻止滚动链,滚动不会传播到祖先元素,但是会显示节点自身的局部效果。例如 Android 上过度滚动的发光效果或 iOS 上的橡皮筋效果。
none与 contain 相同,但是会阻止自身的过度效果。

所以可以这样解决问题:

.content {overscroll-behavior: none;
}

简洁干净高性能,不过 Safari 全系不支持,兼容性如下,有没有感觉 Safari 就是现代版的 IE(偶然听路人说的)!

图片

✅ 解决方案B (event.preventDefault)

借用 event.preventDefault 的能力,当组件滚动到底部或顶部时,通过调用 event.preventDefault 阻止所有滚动,从而页面滚动也不会触发了,而在滚动之间则不做处理。

let initialPageY = 0scrollBox.addEventListener('touchstart', (e) => {initialPageY = e.changedTouches[0].pageY
})scrollBox.addEventListener('touchmove', (e) => {const deltaY = e.changedTouches[0].pageY - initialPageY// 禁止向上滚动溢出if (e.cancelable && deltaY > 0 && scrollBox.scrollTop <= 0) {e.preventDefault()}// 禁止向下滚动溢出if (e.cancelable &&deltaY < 0 && scrollBox.scrollTop + scrollBox.clientHeight >= scrollBox.scrollHeight) {e.preventDefault()}
})

解决方案完整 Demo

https://github.com/Barrior/cases/blob/main/overscroll.html

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

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

相关文章

PC连wifi,网线连接旭日X3派以共享网络

PC电脑连好wifi&#xff0c;找到【控制面板->网络和Internet->网络和共享中心->查看网络状态和任务->更改适配器设置】 找到WLAN&#xff0c;右键【属性->共享】勾上允许&#xff0c;然后【确定】。 现在去与PC通过网线连接好的X3派上配置&#xff1a; 参考&a…

SAP MM学习笔记38 - 入库/请求自动决济(ERS - Evaluated Receipt Settlement)

之前的章节学习了请求书的方方面面&#xff0c;这一章来个终章&#xff0c;入库/请求自动决济&#xff1a;&#xff09;。 1&#xff0c;什么是 ERS ERS&#xff0c;即 入库/请求自动决济&#xff0c;是 自動決済&#xff08;Automatic Settlement&#xff09;功能的一种。 以…

C++ Primer 11 术语表【1】生僻词释义

参数&#xff08;实参&#xff0c;argument&#xff09;向函数传递的值。 赋值&#xff08;assignment&#xff09;抹去一个对象的当前值&#xff0c;用一个新值取代之。 程序块&#xff08;block&#xff09;零条或多条语句的序列&#xff0c;用花括号包围。 缓冲区&#xff0…

python之Cp、Cpk、Pp、Ppk

目录 1、Cp、Cpk、Pp、Ppk 2、python计算 1、Cp、Cpk、Pp、Ppk Cp Process Capability Ratio 可被译为“过程能力指数” Cpk Process Capability K Ratio 可被译为“过程能力K指数” Pp Process Performance Ratio 可被译为“过程绩效指数” Ppk Process Performance K Ra…

关于一篇“范式详解”博文的批注

本篇文章是对于下面这个链接中的文章的批注。这篇文章详细讲述了第一、二、三范式和BCNF范式&#xff0c;希望我的这篇文章能帮助您更好的理解这篇优秀的博文 详解第一范式、第二范式、第三范式、BCNF范式-CSDN博客 “范式”批注 这样理解范式的概念&#xff1a;一张数据表的表…

我的创作纪念日 - 第四年

机缘 几乎自己的所有文章都用同一个模板&#xff0c;虽然高效&#xff0c;但也乏味&#xff0c;就让每年都有一次例外吧。 不知不觉已经过去了四年了&#xff0c;虽然很早就在CSDN查阅资料&#xff0c;但是真正落笔创作是在4年前。那个时候自己已经是一个从事培训讲师&#x…

ETL实现实时文件监听

一、实时文件监听的作用及应用场景 实时文件监听是一种监测指定目录下的文件变化的技术&#xff0c;当产生新文件或者文件被修改时&#xff0c;可实时提醒用户并进行相应处理。这种技术广泛应用于数据备份、日志管理、文件同步和版本控制等场景&#xff0c;它可以帮助用户及时…

桥梁结构健康监测系统落地方案

桥梁结构健康监测的意义是多方面的。首先&#xff0c;它可以实时采集桥梁的结构数据&#xff0c;并对其进行处理和分析&#xff0c;以确定结构损伤的位置、评估桥梁的健康状况&#xff0c;并预测承载力的发展趋势。这有助于及时发现桥梁的结构问题和潜在风险&#xff0c;为采取…

JAVA入门总结回顾

1.常用的DOS命令&#xff1a;DOS窗口常用命令-CSDN博客 2.检查jdk是否安装成功&#xff1a;在cmd中输入java -version或者java或者javac。出现相应的对应显示内容。 3.JDK&#xff0c;JRE之间的关系&#xff1a;JDK是JAVA的开发工具包&#xff0c;JRE是JAVA的的运行环境。JRE…

Vue之样式绑定事件,按键修饰符常用控件

样式绑定 class绑定 使用方式&#xff1a;v-bind:&#xff0c;expression的类型&#xff1a;字符串、数组、对象 style绑定 v-bind:style“expression”&#xff0c; expression的类型&#xff1a;字符串、数组、对象 示例&#xff1a; <--定义示例样式--> <style&g…

rabbitMQ(3)

RabbitMq 交换机 文章目录 1. 交换机的介绍2. 交换机的类型3. 临时队列4. 绑定 (bindings)5. 扇形交换机&#xff08;Fanout &#xff09; 演示6. 直接交换机 Direct exchange6.1 多重绑定6.2 direct 代码案例 7. 主题交换机7.1 Topic 匹配案例7.2 Topic 代码案例 8. headers 头…

Kubernetes-进阶(Pod生命周期/调度/控制器,Ingress代理,数据存储PV/PVC)

Kubernetes-进阶 Pod详解 每个Pod中都可以包含一个或多个容器&#xff0c;这些容器可以分两类 用户程序所在容器&#xff0c;数量用户决定Pause容器&#xff0c;这是每个Pod都会有的一个根容器&#xff0c;它的作用有两个 可以以它为依据&#xff0c;评估整个Pod的健康状态可以…

itbuilder软件在线设计数据库模型,AI与数据库擦出的火花

今天要介绍一款强大的软件&#xff0c;它就是itBuilder软件&#xff0c;一款在线设计数据库模型软件&#xff0c;借助人工智能提高效率&#xff0c;可以生成CRUD代码并推送至开发工具中&#xff1b;它涵盖了几乎所有语言&#xff0c;如Java、Python、JavaScript等&#xff0c;并…

4种实用的制作URL 文件的方法

很多小伙伴有自己的博客、淘宝或者共享文件网站&#xff0c;想要分享、推广自己的网址做成url文件&#xff0c;让别人点击这个url文件直接访问自己的网站。URL文件其实就一个超级链接&#xff0c;制作的方法很多&#xff0c;这里列举4种。 收藏网站直接拖拽 1.第一种&#xf…

drf-过滤、排序、异常处理、自封装Response

过滤 过滤就是根据路由url?后的信息过滤出符合&#xff1f;后条件的数据而非全部&#xff0c;比如…/?nameweer就是只查name是weer的数据&#xff0c;其余不返回。 1、安装&#xff1a;pip3 install django-filter2、注册&#xff1a;在settings.py中的app中注册django-filt…

读书笔记:Effective C++ 2.0 版,条款24(参数缺省值)、条款25(int 0与NULL *歧义问题)

条款24: 在函数重载和设定参数缺省值间慎重选择 基于例子说明&#xff0c;个人觉得核心准则是&#xff1a;尽量简单就行了&#xff0c;简单不了就不要怕麻烦。 //能找到缺省值 int max(int a,int b std::numeric_limits::min(),int c std::numeric_limits::min(),int d std…

服务器数据恢复-某银行服务器硬盘数据恢复案例

服务器故障&分析&#xff1a; 某银行的某一业务模块崩溃&#xff0c;无法正常使用。排查服务器故障&#xff0c;发现运行该业务模块的服务器中多块硬盘离线&#xff0c;导致上层应用崩溃。 故障服务器内多块硬盘掉线&#xff0c;硬盘掉线数量超过服务器raid阵列冗余级别所允…

【T3】畅捷通T3备份账套提示:超时已过期,错误‘53‘文件不存在。

【问题描述】 针对畅捷通T3软件&#xff0c;进行账套备份&#xff08;账套输出&#xff09;的时候&#xff0c; 先是提示”超时已过期“&#xff1b; 点击确定后&#xff0c;再次提示&#xff1a;运行时错误53&#xff0c;文件未找到。 最终导致账套备份/输出失败。 【解决…

react懒加载lazy

lazy 能够让你在组件第一次被渲染之前延迟加载组件的代码。 const SomeComponent lazy(load) 参考 lazy(load) 在组件外部调用 lazy&#xff0c;以声明一个懒加载的 React 组件: import { lazy } from react;const MarkdownPreview lazy(() > import(./MarkdownPrev…

D - United We Stand

思路&#xff1a; &#xff08;1&#xff09;题目要求将集合A划分为B&#xff0c;C两组&#xff0c;使得C中任意数都不是B中的除数 &#xff08;2&#xff09;直观感受&#xff0c;只要让C中数比B中大&#xff0c;则满足条件&#xff0c;不妨只取最大的放入C中&#xff1b; …