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是否有內聯(lián)樣式，如果html或body有內聯(lián)樣式則需要累加，否則會清空原有樣式。

二、去除隱患其它方法滾動頁面(防止誤操作)

隱藏滾動條后，用鼠標滾輪滾動頁面確實不會動了，以為這就ok了，不是…

鍵盤快捷鍵也可以操作瀏覽器的一些操作，與滾動頁面相關的，比如：上下按鍵、翻頁按鍵等。針對鍵盤快捷鍵，需要取消他們的默認操作。

三、添加彈出層樣式

給body添加全局樣式(兼容IE6)

height:100%;

給彈層添加滾動樣式

overflow-y: auto;
width: 100%;
height: 100%;
left:0;
_padding:0 17px 0 0;   //IE6bug，子元素絕對定位后對于父元素的padding依然有效

以上這篇JS彈出層遮罩,隱藏背景頁面滾動條細節(jié)優(yōu)化分析就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

徹底弄懂 JavaScript 執(zhí)行機制
不論你是javascript新手還是老鳥，不論是面試求職，還是日常開發(fā)工作，我們經常會遇到這樣的情況：給定的幾行代碼，我們需要知道其輸出內容和順序。接下來通過本文給大家分享 JavaScript 執(zhí)行機制，感興趣的朋友一起看看吧
2018-10-10
HTML中setCapture、releaseCapture 使用方法淺析
本文給大家簡單介紹了下html中的高級拖動技術setCapture、releaseCapture的使用方法，有需要的小伙伴可以參考下
2016-09-09
微信小程序js時間戳與日期格式的轉換方法
這篇文章主要給大家介紹了關于微信小程序js時間戳與日期格式的轉換方法,在小程序中使用時間選擇器時,獲取到的時間可能是一個時間戳,這并不是我們想要的,這時候我們得將獲取到的時間戳進行轉換,需要的朋友可以參考下
2023-10-10
JavaScript實現(xiàn)監(jiān)控上傳和下載進度
這篇文章主要介紹了JavaScript實現(xiàn)監(jiān)控上傳和下載進度,文章圍繞主題展開詳細的內容介紹，具有一定的參考價值需要的小伙伴可以參考一下
2022-05-05
詳解js模板引擎art template數組渲染的方法
art-template 是一個簡約、超快的模板引擎。這篇文章主要介紹了詳解js模板引擎art template數組渲染的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2018-10-10
uniapp時間格式化處理實現(xiàn)
本文主要介紹了uniapp時間格式化處理實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2022-08-08
Bootstrap標簽頁（Tab）插件切換echarts不顯示問題的解決
這篇文章主要給大家介紹了關于Bootstrap標簽頁（Tab）插件切換echarts不顯示問題的解決方法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2018-07-07
js中net::ERR_FILE_NOT_FOUND報錯的解決
本文主要介紹了js中net::ERR_FILE_NOT_FOUND報錯的解決，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2023-07-07
H5實現(xiàn)手機拍照和選擇上傳功能
這篇文章主要為大家詳細介紹了H5實現(xiàn)手機拍照和選擇上傳功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2019-12-12
JavaScript hasOwnProperty() 函數實例詳解
hasOwnProperty()函數用于指示一個對象自身(不包括原型鏈)是否具有指定名稱的屬性。下面通過本文給大家分享JavaScript hasOwnProperty() 函數實例講解，感興趣的朋友一起看看吧
2017-08-08