禁止滚动穿透

最新推荐文章于 2024-02-29 13:21:00 发布
最新推荐文章于 2024-02-29 13:21:00 发布
阅读量202 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/A2258908698/article/details/119488462
版权
本文探讨了在移动端开发中遇到的滑动冲突问题，即使使用overflow: hidden;样式也无法解决。作者分享了两种解决方法，第一种虽然有效但会导致调试器警告，第二种方法则完美解决了问题且无警告。对于开发者来说，理解并应用这些解决方案对于优化移动端用户体验至关重要。
摘要由CSDN通过智能技术生成

问题:

 

 在弹框出现后还是可以滑动,使用了overflow: hidden;没有用,在.canvas_container外层添加view标签,给这个标签添加css也没有用.

解决方法1

 这样是可以解决了,但是调试器里一直弹出警告,虽然可以不管,但是看的不爽
解决方法2 

 

这样就可以解决了 

A2258908698
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
怎样阻止页面滚动穿透
一只大海
11-21 2935
在前端的开发中，经常会遇到长页面和弹框，触发弹框，会出现遮罩层后面的页面依旧可以滚动，此时就出现了滚动穿透，如何处理呢？ 解决方法： 触发弹框时，给最外层的div添加样式 话不多说，上代码 .prevent_touch_move_box { position: fixed ; overflow: hidden; width: 100%; height: 100%; top: ...
css PC端弹窗时禁止底部页面滚动
且听风吟的博客
08-09 1053
css PC端弹窗时禁止底部页面滚动
CSS防止穿透滚动
Babysbreath__的博客
03-04 2285
CSS防止穿透滚动 touch-action: none; https://www.jianshu.com/p/d9cd78b7c0e5
CSS自定义弹窗如何禁用遮罩层滚动条？用CSS禁用滚动穿透。
qq_33820780的博客
12-28 1089
/ 页面最外层元素.wrap {
canvas不能穿透的问题
的博客
09-02 2271
只要clipContent= false就可以了
css滑动穿透问题
ITzhongzi的博客
04-04 6026
问题描述：移动端当有 fixed 遮罩背景和弹出层时，在屏幕上滑动能够滑动背景下面的内容，这就是著名的滚动穿透问题。示例demo：样式：<style> .box{ width: 100%; height: 100%; position: relative; } .dialog{ ...
微信小程序scroll-view实现滚动穿透和阻止滚动的方法
10-18
在某些场景下，我们可能需要实现滚动穿透或者阻止`scroll-view`的滚动，以达到特定的交互效果。本文将详细介绍如何在微信小程序中处理这些问题。 ### 1. 滚动穿透（Scroll Through） 滚动穿透通常发生在弹窗或半...
解决移动端滚动穿透问题
05-31
在移动Web开发中，"移动端滚动穿透问题"是一个常见的用户体验问题。当用户在页面上触发一个弹出层（如模态对话框、下拉菜单或加载遮罩层）时，通常希望页面主体部分在此期间不可滚动，以防止意外的滚动行为影响交互...
Taro滚动穿透
weixin_42890213的博客
12-02 1695
正常情况下使用AtFloatLayout一般情况是不会有滚动穿透，出现了，百度了不少办法，发现都没有用，应该是自己代码太烂了，我的情况和解决办法： 被穿透的底层视图为<View>高度自适应 AtFloatLayout中还有个滚动窗口<ScrollView> AtFloatLayout中的非ScrollView会滚动穿透。 土办法：把穿透的View换成ScrollView,并设置高度 ![在这里插入图片描述](https://img-blog.csdnimg.cn/202012021
解决弹出层滚动穿透的问题
Harrietjia的博客
03-03 1294
一个棘手的问题：弹出层的滚动穿透，即弹出层滚动，那么被弹出层覆盖的下面的内容区域也会进行滚动。弹出层我是用的view标签然后使用的position:fixed进行的定位；说一下我的解决思路: 一：当弹出层里面无滚动的时候： 可以在遮罩的view标签上定义一个防止事件冒泡的方法： 1 2 3 4 5 6 catchtouch...
canvas滚动 vue_基于Canvas+Vue的弹幕组件
weixin_39884100的博客
12-19 308
更新：支持头像和背景色设置更新：支持实时弹幕插入，支持弹幕的流式布局最近由于项目需要定制化一个弹幕功能，所以尝试使用canvas来开发组件。经过测试在一些低端机的效果也没有明显的卡顿，和大家交流一下弹幕效果功能介绍支持循环弹幕弹幕不重叠支持选择轨道数支持弹幕发送使用npm i vue-barrage参数配置nametypedefaultdescbarrageListArray[]弹幕数据speed...
【CSS】自定义遮罩层下出现页面穿透及滚动解决方案
每天进步一点点, 靠近小目标一点点~
06-26 2031
一 、@touchmove.stop.prevent="moveHandle" 禁止页面滑动 二、遮罩层显示时, 底部页面高度设置100vh，隐藏时取消高度设置 三、使用page-meta标签, style属性, < page-meta page-style="overflow:hidden">, 该方法仅针对真机, hbx内置浏览器不生效, 当允许页面滚动时 page-style="" 优点 : 不限制页面高度
解决移动端滚动穿透的6种方法，经常发生在弹出遮罩层内容滚动，下面页面也滚动的情况
最新发布
男神的专栏
02-29 2363
这时，我们可以通过记录用户打开弹窗前所滚动页面的位置，在弹层展开的时候赋给body在css中的top值，等关闭弹层的时候，再把这个值赋值给body在js中的scrollTop值，还原body的滚动位置。2、touchmove手势移动的时候，再次获取最新的坐标点y的值y2，（其实记录可滚动区域的可滚动高度、当前滚动距离等可以在一开始就记录，我这里写到了touchmove里，还可以再优化）。当弹层出现的时候不需要再禁掉body的滚动效果了，我们可以从弹层方面入手，阻止弹框的touchmove事件的默认行为。
uniapp 禁止滚动穿透(一般用于遮罩)-小程序/app/h5适用
weixin_44805839的博客
07-04 1万+
uniapp 禁止滚动穿透(一般用于遮罩)-小程序/app适用
css禁止滑动页面_css页面滑动穿透的两种解决办法
weixin_31422487的博客
02-23 4175
这篇文章主要介绍了css如何防止页面滑动穿透,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧问题描述：移动端当有 fixed 遮罩背景和弹出层时，在屏幕上滑动能够滑动背景下面的内容，这就是著名的滚动穿透问题。示例demo：样式：.box{width: 100%;height: 100%;position: relative;}.dialog{width: 100%;he...
小程序页面滚动穿透
这魏先森-forguo
06-26 5326
小程序页面滚动穿透 一、场景 在项目当中，基础遇到这样的需求 有一个长列表，或者其他可滚动展示的页面， 在这个页面会弹出一个Modal层，如下： 贝壳找房的 的筛选栏 二、问题 如果这个弹框内容不可滚动，不会有太大问题； 但是当弹出内容是可以滚动的时候，就会有问题， 触摸没有滚动的区域会发现滚动可以穿透，会传递给下面的列表页面， 三、解决办法 程序员是面向Google编程的，找到了下面的解决办法： 监听弹框状态，如果弹框展示就给列表 添加对应样式 // isShowMask 弹框是否展示
滚动穿透的6种解决方案(转载)
muzidanwu的博客
09-18 3565
原文链接: 滚动穿透的6种解决方案. 在移动端中，如果我们使用了一个固定定位的遮罩层，且其下方的dom结构的宽度|高度超出屏幕的宽度|高度，那么即使遮罩层弹出后铺满了整个屏幕，其下方的dom结构依然可以滚动，这就是大家所说的“滚动穿透”。 而且经常是你在pc模拟器上没有问题，但是真机打开就一定会出现。 这个经典八阿哥也是面试时经常会被追问的问题。相信能看到这篇文章的你，已经是遇到了这个问题。我就不gif展示问题效果了。 接下来我网罗了网络，整理了别人说的方案和我自己的方案，一共实现了六种方法，并经过了自己手
移动端滚动穿透问题完美解决方案
热门推荐
樊小书生
05-22 1万+
本文转自：https://uedsky.com/2016-06/mobile-modal-scroll/ 问题 众所周知，移动端当有 fixed 遮罩背景和弹出层时，在屏幕上滑动能够滑动背景下面的内容，这就是臭名昭著的滚动穿透问题。 之前搜索了一圈，找到下面两种方案： css 之 overflow: hidden .modal-open { &amp;, body { o...
H5阻止滚动穿透
Sophia
10-17 3786
问题描述, 滚动弹出框时底层会跟着滚动, 加@touchmove.prevent可阻止底部穿透滚动. //阻止滚动穿透 &lt;div @touchmove.prevent&gt;&lt;/div&gt;    
u-picker滚动穿透
06-01
如果您想要在使用 u-picker 组件时避免滚动穿透的问题，可以尝试以下方法： 1. 在打开 u-picker 组件之前，禁用页面的滚动条。可以使用以下 CSS 代码实现： ``` body { overflow: hidden; } ``` 2. 在关闭 u-...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值