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


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM