html设置遮罩层滚动条滚动条,JavaScript_JS弹出层遮罩,隐藏背景页面滚动条细节优化分析，一、去除滚动条方法 给body - phpStudy...

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弹出层遮罩,隐藏背景页面滚动条细节优化分析就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持phpstudy。相关阅读:

C#生成唯一不重复订单号

css中图片于文本的基线对齐与vertical-align属性设置

js中直接声明一个对象的方法

JS+CSS实现仿新浪微博搜索框的方法

全面解析JavaScript中“&&”和“||”操作符(总结篇)

如何在Win10开始菜单中添加应用快捷方式?

CSS对浏览器的兼容性性处理(IE7,6与Fireofx)

WM_CLOSE、WM_DESTROY、WM_QUIT及各种消息投递函数详解

XP系统不支持升级Win10？Windows XP不能升级Win10的解决方法

Android App开发中ViewPager组件的入门使用教程

解决win7系统电脑插入U盘后就一直很卡该怎么办？

JavaScript中的Truthy和Falsy介绍

WinForm项目开发中Excel用法实例解析

Win8系统控制面板中管理工具的其他快捷启动技巧