有一些場景，比如彈窗，比如商品的拋物線效果，為了更好的前端用戶體驗，要求臨時禁止滾動條的滾動。
參考了前輩的一些經驗，比如這位：https://yujiangshui.com/review-how-to-make-popup-mask-effect/。現做如下總結。
方案1，最為簡單粗暴的方式當然是直接將dom的body掛一個樣式即overflow:hide。
document.body.style.cssText = 'overflow-y:hidden';
基本思路：需要禁止時執行上面代碼，禁用解除則用
document.body.style.cssText = 'overflow-y:auto';
但上述方案存在一個問題，就是頁面內容抖動，這產生了不好的前端操作體驗。
方案2，采用jquery的解決方案，jquery作為老牌的js庫，自帶禁用功能。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jquery實現方案</title>
</head>
<body>
<div style="height: 200px;width: 100%;">
</div>
<div style="text-align: center;">
<button id="btn">點我測試</button>
</div>
<div style="width: 100%;height: 1200px;">這是用開顯示滾動條的</div>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
function unScroll() {
var top = $(document).scrollTop();
$(document).on('scroll.unable', function(e) {
$(document).scrollTop(top);
})
}
//移除禁止滾動條滾動
function removeUnScroll() {
$(document).unbind("scroll.unable");
}
$("#btn").click(function() {
unScroll();
setTimeout(function() {
removeUnScroll();
}, 5000)
})
</script>
</body>
</html>
注意引入jquery，測試覺得還有有些小問題。
方案3，采用css的overflow設置結合padding-right的方案。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>另一種方式禁用</title>
</head>
<body>
<div style="height: 200px;width: 100%;">
</div>
<div style="text-align: center;">
<button id="btn">點我測試</button>
</div>
<div style="width: 100%;height: 1200px;">這是用開顯示滾動條的</div>
<script type="text/javascript">
document.getElementById('btn').addEventListener('click', function() {
document.body.style.cssText = "overflow-y:hidden;padding-right:17px;";
setTimeout(function() {
document.body.style.cssText = "overflow-y:auto;padding-right:0px;";
}, 2000)
});
</script>
</body>
</html>
但是部分瀏覽器的padding-right不為17px;所以產生了方案4。
方案4，就是動態設定padding-right值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>另一種方式禁用</title>
<style type="text/css">
.box-lock-test {
overflow-y: hidden !important;
}
</style>
</head>
<body>
<div style="height: 200px;width: 100%;">
</div>
<div style="text-align: center;">
<button id="btn">點我測試</button>
</div>
<div style="width: 100%;height: 1200px;">這是用開顯示滾動條的</div>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
document.getElementById('btn').addEventListener('click', function() {
// var w1 = $(window).width();
// $('html').addClass('box-lock-test');
// var w2 = $(window).width();
// $('html').removeClass('box-lock-test');
var w1 = $(window).width();
$('body').addClass('box-lock-test');
var w2 = $(window).width();
$('body').removeClass('box-lock-test');
// document.documentElement.style.cssText = `overflow-y:hidden;padding-right:${w2-w1}px;`;
// setTimeout(function() {
// document.documentElement.style.cssText = "overflow-y:auto;padding-right:0px;";
// }, 2000)
document.body.style.cssText = `overflow-y:hidden;padding-right:${w2-w1}px;`;
setTimeout(function() {
document.body.style.cssText = "overflow-y:auto;padding-right:0px;";
}, 2000)
});
</script>
</body>
</html>
如上。
但在具體的開發應用中，發現一些問題，針對overflow的，原因是dom的html和body元素高度塌陷。要使用overflow需要特別留意一下這點。