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

2022-03-08 15:25:52 字數 1166 閱讀 3754

做過彈層元件的童鞋應該都考慮過特殊情況下取消頁面滾動條,讓其不能滾動,這樣使用者體驗會好很多,當彈層內容超出螢幕展現範圍的時候在彈層上面增加滾動條來檢視全部內容。

一、去除滾動條方法

給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依然有效

遮罩層 彈框 頁面滾動

第一種情況比較簡單,彈框和頁面都不可滾動 mask boxvar obtn document.getelementbyid btn omask document.getelementbyid mask obox document.getelementbyid box oclose document....

彈出層完美禁止頁面滾動

頁面中經常會遇到彈出層的部件,當彈出層啟用時覆蓋整個頁面,且背景部分不能滾動。實現起來有以下要點 以下是實踐 codepen 為了讓徹底禁止滾動,還可以在mousewheel和touchmove事件 分別對應pc和移動端 中呼叫preventdefault 方法 function forbidscr...

如何彈出遮罩層遮蔽頁面所有操作

這次專案中需要使用在彈出視窗時使用遮罩層來遮蔽頁面上其他的操作,所以參考資料寫了乙個可復用的 brmms brmms.backdiv 彈出乙個底部的層遮住頁面,禁止使用者進行當前層外的其他操作 brmms.backdiv.popbackdiv function 去掉底部的層 brmms.backdi...