JS彈出層遮罩,隱藏背景頁面滾動(dòng)條細(xì)節(jié)優(yōu)化分析
一、去除滾動(dòng)條方法
給body添加overflow：hidden屬性即可，IE6、7下不會(huì)生效，需要給html增加overflow:hidden屬性
樣式中需要對(duì)IE6、7及其它瀏覽器用hack辨別，這是因?yàn)楫?dāng)頁面拉到下面時(shí)如果html或body被overflow:hidden，透明彈層下面的頁面就會(huì)被部分正常隱藏，通過透明看到的一片的灰度，具體顏色跟平臺(tái)及用戶設(shè)置背景色有關(guān)。
body或html去掉滾動(dòng)條后，頁面會(huì)有一個(gè)滾動(dòng)條寬度/2的跳動(dòng)！這個(gè)跳動(dòng)對(duì)用戶體驗(yàn)來十分不好，因此給body添加一下右padding，大小為滾動(dòng)條的寬度。windows平臺(tái)下滾動(dòng)條的寬度為17px，linux平臺(tái)下不同滾動(dòng)器滾動(dòng)條寬度不一致，可以用相關(guān)代碼計(jì)算出滾動(dòng)條的寬度，以下以windows平臺(tái)為例。
相關(guān)代碼：
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是否有內(nèi)聯(lián)樣式 ，如果html或body有內(nèi)聯(lián)樣式則需要累加，否則會(huì)清空原有樣式。
二、去除隱患其它方法滾動(dòng)頁面(防止誤操作)
隱藏滾動(dòng)條后，用鼠標(biāo)滾輪滾動(dòng)頁面確實(shí)不會(huì)動(dòng)了，以為這就ok了，不是…
鍵盤快捷鍵也可以操作瀏覽器的一些操作，與滾動(dòng)頁面相關(guān)的，比如：上下按鍵、翻頁按鍵等。針對(duì)鍵盤快捷鍵，需要取消他們的默認(rèn)操作。
三、添加彈出層樣式
給body添加全局樣式(兼容IE6)
height:100%;
給彈層添加滾動(dòng)樣式
overflow-y: auto; width: 100%; height: 100%; left:0; _padding:0 17px 0 0; //IE6bug，子元素絕對(duì)定位后對(duì)于父元素的padding依然有效
以上這篇JS彈出層遮罩,隱藏背景頁面滾動(dòng)條細(xì)節(jié)優(yōu)化分析就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
在JavaScript中實(shí)現(xiàn)保留兩位小數(shù)的方法小結(jié)
在JavaScript中,處理數(shù)字并格式化它們以顯示特定的小數(shù)位數(shù)是一個(gè)常見的需求,特別是,當(dāng)你需要顯示貨幣、測(cè)量值或其他需要精確到兩位小數(shù)的數(shù)據(jù)時(shí),本文將詳細(xì)介紹幾種在JavaScript中實(shí)現(xiàn)保留兩位小數(shù)的方法,需要的朋友可以參考下2024-11-11
淺談Javascript中的函數(shù)、this以及原型
下面小編就為大家?guī)硪黄獪\談Javascript中的函數(shù)、this以及原型。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-10-10
這篇文章主要介紹了URL中“#” “？” &“”號(hào)的作用淺析,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2017-02-02
原生微信小程序中封裝一個(gè)模擬select下拉框組件代碼示例
這篇文章主要給大家介紹了關(guān)于原生微信小程序中封裝一個(gè)模擬select下拉框組件的相關(guān)資料,文中介紹了如何在小程序中創(chuàng)建和使用自定義組件van-select,包括組件的創(chuàng)建步驟和在頁面中的應(yīng)用方法,需要的朋友可以參考下2024-11-11
這篇文章主要介紹了JavaScript設(shè)計(jì)模式手寫示例，設(shè)計(jì)模式（Design pattern） 是解決軟件開發(fā)某些特定問題而提出的一些解決方案也可以理解成解決問題的一些思路。通過設(shè)計(jì)模式可以幫助我們?cè)鰪?qiáng)代碼的可重用性、可擴(kuò)充性、 可維護(hù)性、靈活性好2022-12-12
js實(shí)現(xiàn)內(nèi)容顯示并使用json傳輸數(shù)據(jù)
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)內(nèi)容顯示并使用json傳輸數(shù)據(jù)的方法，感興趣的小伙伴們可以參考一下2016-03-03
這篇文章給大家分享了關(guān)于js中時(shí)間格式化的幾種方法，有需要的朋友們可以參考學(xué)習(xí)下。2018-07-07
TypeScript中枚舉類型的理解與應(yīng)用場(chǎng)景
如 TypeScript 官方文檔所說，枚舉類型是對(duì) JavaScript 標(biāo)準(zhǔn)數(shù)據(jù)類型集的擴(kuò)充,所以下面這篇文章主要給大家介紹了關(guān)于TypeScript中枚舉類型的理解與應(yīng)用場(chǎng)景的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2021-09-09
這篇文章主要介紹了JavaScript中return false的用法,在大多數(shù)情況下,為事件處理函數(shù)返回false,可以防止默認(rèn)的事件行為,需要的朋友可以參考下2015-03-03
JS對(duì)象數(shù)組中如何匹配某個(gè)屬性值
這篇文章主要介紹了JS對(duì)象數(shù)組中如何匹配某個(gè)屬性值，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09