在實現蒙層的時候通常都是通過position:fixed去實現，當蒙層出現的時候，我們滾動滑鼠的時候會發現蒙層後面的網頁背景內容是依然可以滾動的，這樣給使用者的體驗不是很好，針對pc桌面端的專案，可以通過給根元素新增overflow:hidden屬性去解決。
這樣做的話依然會有乙個小小的問題，具體如下gif圖所示：
細心的同學可以發現，就是當蒙層出現的時候網頁的主體向右偏移了一些，當蒙層消失的時候，網頁主體往回偏移回到了原來的地方。
瀏覽器的滾動條是佔據一定的寬度，當給根元素新增overflow:hidden屬性的時候，滾動條消失會導致頁面可用寬度的變化，頁面就會產生晃動。
既然知道了頁面晃動是因為滾動條的消失引起，那當蒙層出現的時候，我們可以通過給根元素填充乙個透明的右邊框borderright屬性，寬度值和消失的滾動條一樣。
實現的js**如下：
最後的效果：
更多專業前端知識，請上
【猿2048】www.mk2048.com
闡述overflow hidden屬性
overflow hidden這個css樣式是大家常用到的css樣式，但是大多數人對這個樣式的理解僅僅侷限於隱藏溢位，其實他還有清除浮動這個含義。這是乙個常用的div寫法，下面我們來書寫樣式。大家可以在dmx中自己做試驗 wai nei 可以看到，我給nei這個id加了乙個浮動，我們常規的理解是，我...
全面闡述overflow hidden屬性
之前說過這個overflow的各種屬性，其中也包括可這個overflow hidden屬性。之前我也不知道overflow hidden還可以清楚浮動。現在我就把這一部分呢也貼出來大家一起學習下吧。overflow hidden這個css樣式是大家常用到的css樣式，但是大多數人對這個樣式的理解僅僅...
關於overflow hidden的研究
示例頁面原始碼 當外層div設定overflow hidden屬性,內層div設定了float left,如果同時寬度超過外層div,會自動擷取內層div width,以適合外層width.nei wai 另外，我們再做乙個試驗，將wai這個div的高度值刪除後，我們發現，wai的高度自動的被nei...