本文介绍: 滚动穿透问题描述:在移动端开发模态框时(小程序也会出现),当模态框下的页面超过一屏时,在fixed定位的弹窗遮罩层上进行滑动,它下面的内容也会跟着一起滑动,看起来好像事件穿透到了下面的DOM元素一样,我们类比点击穿透,姑且称他为滚动穿透。问题原因:通过事件的表象,可以推测是文档的滚动事件被触发了,那我们就禁用滚动事件就好办了。案例伪代码:解决方案✅ e.preventDefault()小程序——脚本语法,通过e.preventDefault()阻止元素的touch–move事件。(H5同理
滚动穿透
问题描述:
在移动端开发模态框时(小程序也会出现),当模态框下的页面超过一屏时,在fixed定位的弹窗遮罩层上进行滑动,它下面的内容也会跟着一起滑动,看起来好像事件穿透到了下面的DOM元素一样,我们类比点击穿透,姑且称他为滚动穿透。
问题原因:
通过事件的表象,可以推测是文档的滚动事件被触发了,那我们就禁用滚动事件就好办了。
案例伪代码:
解决方案✅ e.preventDefault()
小程序——脚本语法,通过e.preventDefault()阻止元素的touch–move事件。(H5同理,监听touch–move事件,阻止其touch–move事件)
解决方案B✅ (touch–action)
默认情况下,平移(滚动)和缩放手势由浏览器专门处理,但是可以通过 CSS 特性 touch–action 来改变触摸手势的行为。摘取几个 touch–action 的值如下。
于是在 popup 元素上设置该属性,禁用元素(及其不可滚动的后代)上的所有手势就可以解决该问题了。
滚动溢出
问题描述:
弹窗内也含有滚动元素,在滚动元素滚到底部或顶部时,再往下或往上滚动,也会触发页面的滚动,这种现象称之为滚动链(scroll chaining), 但是感觉滚动溢出(overscroll)这个名字更言辞达意。
解决方案–小程序✅ (disable-lower/upper–scroll)
解决方案-H5(未验证)—(overscroll-behavior)
声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。