1. 程式人生 > >彈出層禁止頁面滾動

彈出層禁止頁面滾動

在做移動端遮罩層時,發現頁面可以上下滾動,踩了N個坑之後,總算是解決了這個問題。
禁止滾動
給body設定寬高都是100%,固定在左上角,溢位隱藏的樣式。

var body = document.body;
body.style.cssText = 'width: 100%; height: 100%; position: fixed; top: 0; left: 0; overflow: hidden;';

但是,這樣會有BUG:每次執行這個,都會把頁面拉到最頂部,很明顯這樣是不行的。解決方案如下:

var body = document.body;
var top = body.scrollTop;
body.style.cssText = 'width: 100%; height: 100%; position: fixed; top: -' + top + 'px; left: 0; overflow: hidden;';

關閉遮罩層時:

body.removeAttribute('style');
body.scrollTop = top;