JS禁止滚动条滚动

 

我们在写项目时候可能会遇到这样一种效果：
点击按钮，弹出一个对话框，此时只能在框内操作，此时滚动条消失并禁止滚动

或是这样的

 

 1、overflow：hidden

设置body的overflow属性值为hidden

禁用滚动条：

document.body.style.overflow = 'hidden';
document.body.style.width = 'calc(100% - 17px)'; // 避免因为消失滚动条造成页面抖动

停止禁用滚动条：

document.body.style.overflow = 'auto';
document.body.style.width = '100%'; // 避免因为消失滚动条造成页面抖动

原理：平时body的overflow属性默认值就是auto，如果把该属性设置为hidden，则body的溢出部分显示隐藏，而不会显示滚动条，如果属性值auto则是溢出部分自动显示滚动条。

如果之前就显示滚动条那么点击后滚动条消失，就是会消失这页面宽度的17像素，从而导致页面抖动，这时候我们可以用calc计算函数将这17像素减去

2、position:fixed

将body设置为固定定位，将body元素的定位属性设置为fixed，可以使元素固定在屏幕上，从而禁止滚动，例如：

禁用滚动条：

document.body.style.position = 'fixed';
document.body.style.left = '0';
document.body.style.top = '0';
document.body.style.width = 'calc(100% - 17px)';

停止禁用滚动条：

document.body.style.position = 'static';
document.body.style.width = '100%';

同第一种方法一样，会造成页面抖动，同样可以用calc计算函数减去滚动条的17像素，从而解决抖动问题