H5禁止弹窗页面滚动

这篇文章讲解一下，弹窗弹出以后，如何禁止页面滑动的技巧。

如下图所示，在“弹窗”弹出后页面是可以滚动的。

解决方案：

第一步：在点击弹框的事件中添加：

 $("body").addClass('prevetwinow');

第二步：在关闭弹框的事件中添加：

 $("body").removeClass('prevetwinow');

第三步：写CSS中prevetwinow的内容

.prevetwinow{overflow: hidden;
}

H5禁止弹窗页面滚动相关推荐

css PC端弹窗时禁止底部页面滚动
代码: <script> export default {name: "",data () {return {showDlg: false}},watch: {},cr ...
WeChat------小程序弹窗开启时禁止底部页面滚动
最近在做微信小程序的开发,涉及到自定义弹窗,然而当我的表单页面过长,同时自定义弹窗也过长,即两者都需要滚动的时候,问题出现了: 问题:当我滚动弹出窗页面时,会导致后面的页面也出现滚动的表现: ...
蒙层禁止下方页面滚动防抖动完美方案
文章目录学习链接前言蒙层禁止页面滚动的方案实现 body hidden touch preventDefault body fixed 解决js 禁止滚动条滚动,并且滚动条不消失,页面大小不闪 ...
html遮罩层禁止滚动条滚动,遮罩层上弹窗滚动时禁止下层页面滚动的处理
css的处理:html, body { height: 100%; } body{ position: relative; } /*遮罩层显示时body的样式*/ .notScroll { overf ...
弹窗时候禁止页面滚动
2019独角兽企业重金招聘Python工程师标准>>> 1.依靠css 将页面 document.documentElement.style.overflow='hidden'; ...
跳出弹窗页面禁止滚动（PC端和手机端）
跳出弹窗页面禁止滚动(PC端和手机端) pc端如何实现 1.当弹窗显示时,为body元素添加属性:overflow:hidden, 当关闭弹窗时移除该属性即可 2.在弹窗的div上设置 @scroll ...
H5禁止页面滑动/滚动
禁止页面滚动--完美解决方案,滚动条显示与否,手持设备兼容与否禁止页面滚动有三种方法 1,依靠css 将页面 document.documentElement.style.overflow='hi ...
bootsrtap h5 移动版页面在苹果手机ios滑动上下拉动滚动卡顿问题解决方法
bootsrtap h5 移动版页面在苹果手机ios滑动上下拉动滚动卡顿问题解决方法 bootsrtap框架做的h5页面,在android手机下没有卡顿问题,在苹果手机就一直存在这问题,开始毫无头绪 ...
蒙层禁止页面滚动的方案
蒙层禁止页面滚动的方案弹窗是一种常见的交互方式,而蒙层是弹窗必不可少的元素,用于隔断页面与弹窗区块,暂时阻断页面的交互.但是在蒙层出现的时候滚动页面,如果不加处理,蒙层底部的页面会开始滚动,实际上我 ...

H5禁止弹窗页面滚动

解决方案：

第一步：在点击弹框的事件中添加：

第二步：在关闭弹框的事件中添加：

第三步：写CSS中prevetwinow的内容

H5禁止弹窗页面滚动相关推荐

最新文章

热门文章

H5禁止弹窗页面滚动

解决方案：

第一步： 在点击弹框的事件中添加：

第二步： 在关闭弹框的事件中添加：

第三步：写CSS中prevetwinow的内容

H5禁止弹窗页面滚动相关推荐

最新文章

热门文章

第一步：在点击弹框的事件中添加：

第二步：在关闭弹框的事件中添加：