JS彈出層遮罩,隱藏背景頁面滾動條細節優化分析_javascript技巧

一、去除滾動條法

為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彈出層遮罩,隱藏背景頁面滾動條細節優化分析就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持腳本之家。