JS彈出層遮罩,隱藏背景頁面捲軸細節最佳化

標籤：

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

一、去除捲軸方法
給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依然有效

 

從 fancybox 外掛程式中提取出來的檢測方法大體如下

w1 = $(window).width();H.addClass(‘fancybox-lock-test‘);w2 = $(window).width();H.removeClass(‘fancybox-lock-test‘);$("<style type=‘text/css‘>.fancybox-margin{margin-right:" + (w2 - w1) + "px;}</style>").appendTo("head");

檢測添加類的目的就是取消捲軸，

.fancybox-lock-test {    overflow-y: hidden !important;}

更詳細的彈窗可參考於江水的：再談彈窗那些事

JS彈出層遮罩,隱藏背景頁面捲軸細節最佳化