JS弹出层遮罩,隐藏背景页面滚动条细节优化分析
一、去除滚动条方法
给body添加overflow：hidden属性即可，IE6、7下不会生效，需要给html增加overflow:hidden属性
样式中需要对IE6、7及其它浏览器用hack辨别，这是因为当页面拉到下面时如果html或body被overflow:hidden，透明弹层下面的页面就会被部分正常隐藏，通过透明看到的一片的灰度，具体颜色跟平台及用户设置背景色有关。
body或html去掉滚动条后，页面会有一个滚动条宽度/2的跳动！这个跳动对用户体验来十分不好，因此给body添加一下右padding，大小为滚动条的宽度。windows平台下滚动条的宽度为17px，linux平台下不同滚动器滚动条宽度不一致，可以用相关代码计算出滚动条的宽度，以下以windows平台为例。
相关代码：
document.documentElement.style.cssText = ‘overflow:none;+overflow:hidden;_overflow:hidden;'; document.body.style.cssText = ‘overflow:hidden;+overflow:none;_overflow:none;padding:0 17px 0 0;';
以上代码不考虑html或body是否有内联样式 ，如果html或body有内联样式则需要累加，否则会清空原有样式。
二、去除隐患其它方法滚动页面(防止误操作)
隐藏滚动条后，用鼠标滚轮滚动页面确实不会动了，以为这就ok了，不是…
键盘快捷键也可以操作浏览器的一些操作，与滚动页面相关的，比如：上下按键、翻页按键等。针对键盘快捷键，需要取消他们的默认操作。
三、添加弹出层样式
给body添加全局样式(兼容IE6)
height:100%;
给弹层添加滚动样式
overflow-y: auto; width: 100%; height: 100%; left:0; _padding:0 17px 0 0; //IE6bug，子元素绝对定位后对于父元素的padding依然有效
以上这篇JS弹出层遮罩,隐藏背景页面滚动条细节优化分析就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持小牛知识库。
-
本文向大家介绍jQuery+html5实现div弹出层并遮罩背景，包括了jQuery+html5实现div弹出层并遮罩背景的使用技巧和注意事项，需要的朋友参考一下 渐入弹窗，背景变色不可点击。查看效果：http://runjs.cn/detail/t08gmoij 以上所述就是本文的全部内容了，希望大家能够喜欢。
-
本文向大家介绍vue 弹出遮罩层样式实例，包括了vue 弹出遮罩层样式实例的使用技巧和注意事项，需要的朋友参考一下 以前做遮罩层都是写最小高度来占满屏，但是总会出现问题，也没改变，今天一个人在交流群上问这个时，看到一个回答解决了我这一个bug，学到了，现在记录一下样式。 <div class='popContainer'></div> 这样遮罩层就会占满屏了 补充知识：vue 锁定蒙版 不让里面页
-
本文向大家介绍Bootstrap Modal遮罩弹出层(完整版)，包括了Bootstrap Modal遮罩弹出层(完整版)的使用技巧和注意事项，需要的朋友参考一下 之前发表过一篇文章叫Bootstrap Modal弹窗代码，其实那个只是一个弹出层代码而已，并不是仿造Bootstrap的，Bootstrap modal是给外层添加固定fixed，然后内容使用自适应靠上居中方式。今天分享的这篇文章正是
-
问题内容： 可以使用CSS隐藏滚动条吗？你会怎么做？ 问题答案： 像这样在body标签上设置： 上面的代码同时隐藏了水平和垂直滚动条。 如果只想隐藏 垂直滚动条 ，请使用： 如果只想隐藏 水平滚动条 ，请使用：
-
介绍 创建一个遮罩层，用于强调特定的页面元素，并阻止用户进行其他操作。 引入 import { createApp } from 'vue'; import { Overlay } from 'vant'; const app = createApp(); app.use(Overlay); 代码演示 基础用法 <van-button type="primary" text="显示遮罩层" @
-
Mask 遮罩层 平台差异说明 App H5 微信小程序 支付宝小程序 百度小程序 头条小程序 QQ小程序 √ √ √ √ √ √ √ 基本使用 通过show参数配置是否显示遮罩 遮罩被点击时，会发送一个click事件，如不需要此事件，请设置mask-click-able参数为false <template> <u-mask :show="show" @click="show = false">
-
本文向大家介绍js+html5实现半透明遮罩层弹框效果，包括了js+html5实现半透明遮罩层弹框效果的使用技巧和注意事项，需要的朋友参考一下 点击按钮，出现半透明遮罩层弹框，说说自己之前发过的愁吧 1、遮罩层半透明了 弹框也跟着半透明了 就像这样 绝望吧 是哪里错了呢？你的css是这样写的吧： 应该这样： 需要注意的是这几个参数的意思：RGB Red Green Bule 3色!及212, 0
-
本文向大家介绍纯js实现遮罩层效果原理分析，包括了纯js实现遮罩层效果原理分析的使用技巧和注意事项，需要的朋友参考一下 可以说这个功能，在我理解了前面的“贪吃蛇”之后，实在是与刚开始想象的难度差了好多，当然是这种方式有取巧之嫌，终归是实现了功能，我们来进行分析整理 1、实现原理 本片文章的 是实现原理如下： * 实际上弹出层、遮罩层和原页面显示分别为三个不同的div * 弹出层的层级在遮罩层之上，