【Vue】24.遮罩层阻止默认滚动事件

在写移动端页面的时候，弹出遮罩层后，我们仍然可以滚动页面。vue中提供@touchmove.prevent.stop，@mousewheel.prevent方法可以完美解决这个问题。

<div class="dialog" @touchmove.prevent.stop @mousewheel.prevent></div>

如果不使用vue的话，可以给body添加overflow:hidden属性解决。

【Vue】24.遮罩层阻止默认滚动事件相关推荐

vue项目中textarea阻止默认换行事件
需求如下: textarea中,输入回车键时添加分号分析需求,分下面几步阻止默认回车换行获取值并添加分号 <!-- 此处使用了Vue语法中的事件修饰符 keydown.enter --&g ...
html禁止页面左右滑动,js阻止移动端默认事件以及只阻止横向滚动事件方法
js阻止移动端默认事件,是在相关的touch事件的时候利用event.preventDefault();来阻止默认滚动行为,但是如果要实现阻止横向滚动行为而不阻止竖向滚动行为就要写一个方法通过手指滑动 ...
# 解决微信小程序遮罩层底部页面滚动
解决微信小程序遮罩层底部页面滚动一.wxml文件添加catchtouchmove="move". <view class="" class=" ...
JavaScript事件——event对象事件冒泡阻止默认行为事件捕获
event对象用来获取事物的详细信息:鼠标位置.键盘按键 e.clientX 鼠标距离元素所在的X轴(左边)位置 e.clientY 鼠标距离元素所在的Y轴(顶部)位置 (左上角为0,0点) 获取e ...
html js 禁用浏览器上下滑动,纯JS阻止浏览器默认滚动事件，实现自定义滚动方法...
首先该方法兼容IE7+以上浏览器,可以实现页面上下滚动,而且也可以实现页面左右滚动,每次滚动的距离为屏幕的大小,滚动为加速滚动 javaScript代码如下: //滚动实现方法,使用鼠标滚轮每次滚动浏 ...
键盘压缩背景，ios滚动不流畅，禁止遮罩层下面内容滚动
1. <script> const bodyHeight = document.documentElement.clientHeight ...
html遮罩层禁止滚动条滚动,遮罩层上弹窗滚动时禁止下层页面滚动的处理
css的处理:html, body { height: 100%; } body{ position: relative; } /*遮罩层显示时body的样式*/ .notScroll { overf ...
添加遮罩层，实现点击穿透，实现遮罩层按钮点击，遮罩层下层点击事件
给绝对定位的层多加一个样式:" pointer-events:none; " 这样绝对定位层下的元素就可以点击了如果在绝对定位层上存在能够点击的元素,在添加" poin ...
JS阻止浏览器滚动事件
在前几天的项目中,场景值如下: 1.动态生成列表,列表高度不固定 2.外面父元素的属性设置为overflow:auto; 3.鼠标移动到列-li中的a上,出现选择列表,鼠标在列表上,列表不消失 4.当 ...

【Vue】24.遮罩层阻止默认滚动事件

【Vue】24.遮罩层阻止默认滚动事件相关推荐

最新文章

热门文章