遮罩层弹起禁止页面滚动

最新推荐文章于 2024-05-21 15:42:43 发布

愤怒的皮卡

最新推荐文章于 2024-05-21 15:42:43 发布

阅读量301

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/qq_38629000/article/details/82226161

博客指出遮罩层弹起时，背后页面 touchmove 仍可滚动导致页面滚动的问题，并给出解决方案，即通过取消默认事件来解决，还给出了相应的 jQuery 代码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

有时候我们会发现遮罩层弹起的时候￥背后页面touchmove的时候依然可以滚动而导致页面滚动所以我们可以取消默认事件来解决一下。

$(document).on("touchmove",function(e){

if(e.target.className.indexOf("")>0){

e.preventDefault();

}

})

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

愤怒的皮卡

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

手写一个禁止拖动的遮罩蒙层

weixin_43466871的博客

06-04

614

小程序中如果将页面写为flex布局，并且里面嵌套了input,那input中的placeholder和value在键盘弹起后可以不会随屏幕滚动，解决方法：如果不想破坏flex布局，可以写一个透明遮罩层，当input onFocus的时候遮罩层弹出，onBlur时遮罩层关闭，以禁止键盘弹起时的屏幕滚动。当然上面只是提供一种思路，遮罩层可以用于其他方面 const handleTouchMove = (e) => { e.preventDefault() e.stopPropa

移动端H5页面关于软键盘的一些踩坑记录

this_ITBoy的博客

08-27

4817

最近一个项目需要做一个留言的功能，需求很简单，点击留言按钮底部弹出留言框，然后发送留言给后台就行了，还有一个就是页面要实现复制功能。讨论需求的时候我预想到了手机上软键盘的弹出可能会有一些bug，不过需求比较急，就想着先做完再来改呗。很快做完之后，在电脑上测了没毛病，提测之后，bug刷刷的就来了： 1、手机ios或者Android微信，点击留言弹出输入框，点击完成或者收起按钮，或者安卓手机点击自带...

参与评论您还未登录，请先登录后发表或查看评论

vue 遮罩层阻止默认滚动事件操作

10-15

主要介绍了vue 遮罩层阻止默认滚动事件操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧

遮罩层下禁止页面滚动

weixin_38169798的博客

09-03

641

// 封装禁止页面滚动方法（该方法兼容PC端和移动端）var topSpace = 0function BodyScroll (isState) { var bodyDoc = document.body if (isState) {topSpace= window.scrollYbodyDoc.style.position = 'fixed'bodyDoc.style...

vue3实现遮罩层外部禁止页面滚动，内部可滚动

赵又又的博客

03-09

7124

直接在遮罩层添加 @touchmove.prevent 可以实现禁止页面滚动，但是同时遮罩层内部也无法滚动了。方法一：(此方法可以实现需求，但是关闭遮罩层后主页面会滑动到顶部，无法回到原来的浏览位置) function mo = function(e){ e.preventDefault(); }; //禁止滚动 stop(){ document.body.style.overflow='hidden'; documen

遮罩层实现以及遮罩层页面禁止滚动的解决方法

艺术编程

12-03

4977

最近需要写一个自定义的弹框，之前的弹框是用的alert()或者confirm()，满足不了需求因此重新写一个自定义的。写弹框我想到了在写一个遮罩层会使得效果更好，今天在这里做个笔记以后用到的时候方便自己。遮罩实现的原理：写一个div定义他的宽高和屏幕相同然后设置他的z-index值使得他位于其他层上面。详情见下面代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"&g

vue设置遮掩层禁止滚动

ZHXT__的博客

06-17

608

vue 遮罩层阻止默认滚动事件在写移动端页面的时候,弹出遮罩层后，我们仍然可以滚动页面。 vue中提供 @touchmove.prevent 方法可以完美解决这个问题 <div class="dialog" @touchmove.prevent ></div> 可以给body添加overflow:hidden属性解决, 但是还有值得一提的是,虽然touchmove不会动,但是鼠标使用滚动键还是会滚动 ...

弹出遮罩层后禁止滚动效果【实现代码】

09-02

综上所述，通过监听`touchmove`事件或修改CSS样式，我们可以实现弹出遮罩层后禁止页面滚动的效果。这两种方法各有优缺点，选择哪种取决于具体应用场景和目标用户群。在实际开发中，应结合项目需求灵活运用，并注意...

禁止弹窗中蒙层底部页面跟随滚动的几种方法

01-19

但是，在蒙层元素中滑动的时候，滑到内容的尽头时，再继续滑动，蒙层底部的页面会开始滚动，显然这不是我们想要的效果，因此需要阻止这种行为。那么，如何阻止呢？请看以下分析：方案分析方案一打开蒙层时，给...

uniapp使用u-popup组件弹窗出现页面还可滑动

weixin_53339757的博客

01-31

3689

解决u-popup出现遮罩层页面滑动问题

禁止遮罩层以下屏幕滑动

嘿喵财运旺旺

06-21

923

原帖地址：https://www.cnblogs.com/gaohui/p/5819777.html 其他方法参考链接下面是最适合的 $(".zhezhao").on('touchmove',function(e){ e.preventDefault(); //阻止默认行为 }) 只需要给遮罩这一层添加禁止触摸就可以了，...

javascript实现蒙版与禁止页面滚动

sunshine的博客

06-14

3650

蒙版与禁止内容滚动蒙版与禁止内容滚动项目需求：页面很长，要求加个蒙版，点击特定位置蒙版消失可以滑动页面，否则蒙版存在页面不可以滑动；要同时兼容移动端和pc端。<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name=viewport content="width=device-width,in

vue中遮罩层阻止鼠标滚动及页面滚动

Android_Cob的博客

08-19

722

vue提供一个简易的事件 @touchmove.prevent ——阻止页面滚动 @mousewheel.prevent——阻止鼠标滚动

遮罩层内的元素滚动时不让遮罩层底下的元素滚动的办法

最新发布

qq_39174318的博客

05-21

794

打开遮罩层的时候, 获取body元素的样式, 然后设置position为relative;overflow为hidden;这样页面就不会滚动了, 但是遮罩层可以滚动, 这里是从。知道的, 但是文中说, 如果给body设置了这俩样式属性后, 不管遮罩内的还是遮罩底下的都不会滚动, 但是实际操作发现, 遮罩内的会滚动, 遮罩底下的不会滚动.H5端目录列表的遮罩层在遮挡住文章内容后, 滚动目录列表会引起文章内容的滚动. 想要的效果打开目录列表遮罩层时仅目录列表滚动.

解决遮罩穿透滚动的问题

hfhwfw161226的博客

04-08

969

针对很多弹出层的遮罩显示后仍然可以滚动底层页面的问题方法一：显示弹框时设置页面高度为100%，且溢出隐藏，关闭弹框时放开原先的设置 // 打开弹框时 let body = document.querySelector('body'); body.style.overflow = 'hidden'; // 关闭弹框时 let body = document.querySelector...

移动端$(document) click不管事，使用touchend

weixin_30528371的博客

10-16

214

$(document).on('touchend',function(e){ if(!$('.menuIcon')[0].contains(e.target)){ if(flag == 0){ $('.navMenu').slideUp(); flag = 1; ...

前端页面弹框遮罩禁止页面滚动的解决方法

weixin_45785873的博客

05-12

3105

做练习时，遇到了有关锁定body的问题，最开始是在pc端上遇到，开始的解决办法也很简单，但随学习的深入，就发现，在移动端上就没有那么容易的解决这个问题，特别是在安卓设备上。所以，本文就锁定body的问题，来叙述一下咱们的方法。

ios手机访问H5页面中$(document).on绑定无效问题

ake520520的博客

01-15

387

1.问题描述用amazeUI做了个手机端网站，网站头部是一个点击按钮下拉菜单，点击页面其余区域下拉菜单隐藏。在chrome模拟安卓和iOS都可以正常触发，但是在真机实测的时候，iOS上面失效了。简单代码描述如下 $(document).on("click", function (e) { $("#collapse-head").css("display...

$(document).click() 在iphone上不触发事件解决办法