JS彈出層遮罩,隱藏背景頁(yè)面滾動(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)頁(yè)面拉到下面時(shí)如果html或body被overflow:hidden，透明彈層下面的頁(yè)面就會(huì)被部分正常隱藏，通過透明看到的一片的灰度，具體顏色跟平臺(tái)及用戶設(shè)置背景色有關(guān)。
body或html去掉滾動(dòng)條后，頁(yè)面會(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)頁(yè)面(防止誤操作)
隱藏滾動(dòng)條后，用鼠標(biāo)滾輪滾動(dòng)頁(yè)面確實(shí)不會(huì)動(dòng)了，以為這就ok了，不是…
鍵盤快捷鍵也可以操作瀏覽器的一些操作，與滾動(dòng)頁(yè)面相關(guān)的，比如：上下按鍵、翻頁(yè)按鍵等。針對(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彈出層遮罩,隱藏背景頁(yè)面滾動(dòng)條細(xì)節(jié)優(yōu)化分析就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
不論你是javascript新手還是老鳥，不論是面試求職，還是日常開發(fā)工作，我們經(jīng)常會(huì)遇到這樣的情況：給定的幾行代碼，我們需要知道其輸出內(nèi)容和順序。接下來通過本文給大家分享 JavaScript 執(zhí)行機(jī)制，感興趣的朋友一起看看吧2018-10-10
HTML中setCapture、releaseCapture 使用方法淺析
本文給大家簡(jiǎn)單介紹了下html中的高級(jí)拖動(dòng)技術(shù)setCapture、releaseCapture的使用方法，有需要的小伙伴可以參考下2016-09-09
微信小程序js時(shí)間戳與日期格式的轉(zhuǎn)換方法
這篇文章主要給大家介紹了關(guān)于微信小程序js時(shí)間戳與日期格式的轉(zhuǎn)換方法,在小程序中使用時(shí)間選擇器時(shí),獲取到的時(shí)間可能是一個(gè)時(shí)間戳,這并不是我們想要的,這時(shí)候我們得將獲取到的時(shí)間戳進(jìn)行轉(zhuǎn)換,需要的朋友可以參考下2023-10-10
JavaScript實(shí)現(xiàn)監(jiān)控上傳和下載進(jìn)度
這篇文章主要介紹了JavaScript實(shí)現(xiàn)監(jiān)控上傳和下載進(jìn)度,文章圍繞主題展開詳細(xì)的內(nèi)容介紹，具有一定的參考價(jià)值需要的小伙伴可以參考一下2022-05-05
詳解js模板引擎art template數(shù)組渲染的方法
art-template 是一個(gè)簡(jiǎn)約、超快的模板引擎。這篇文章主要介紹了詳解js模板引擎art template數(shù)組渲染的方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-10-10
uniapp時(shí)間格式化處理實(shí)現(xiàn)
本文主要介紹了uniapp時(shí)間格式化處理實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-08-08
Bootstrap標(biāo)簽頁(yè)（Tab）插件切換echarts不顯示問題的解決
這篇文章主要給大家介紹了關(guān)于Bootstrap標(biāo)簽頁(yè)（Tab）插件切換echarts不顯示問題的解決方法，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2018-07-07
js中net::ERR_FILE_NOT_FOUND報(bào)錯(cuò)的解決
本文主要介紹了js中net::ERR_FILE_NOT_FOUND報(bào)錯(cuò)的解決，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-07-07
H5實(shí)現(xiàn)手機(jī)拍照和選擇上傳功能
這篇文章主要為大家詳細(xì)介紹了H5實(shí)現(xiàn)手機(jī)拍照和選擇上傳功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-12-12
JavaScript hasOwnProperty() 函數(shù)實(shí)例詳解
hasOwnProperty()函數(shù)用于指示一個(gè)對(duì)象自身(不包括原型鏈)是否具有指定名稱的屬性。下面通過本文給大家分享JavaScript hasOwnProperty() 函數(shù)實(shí)例講解，感興趣的朋友一起看看吧2017-08-08