解决模拟弹出框情况下文档滚动的问题

用div元素来模拟弹出框很普遍，它可以自行定制各式各样的弹出框。弹出框一般用的是fixed绝对定位，也就是相对于浏览器窗口定位。

在文档高度大于窗口高度的情况下，弹出框会存在一个问题。当弹出框在显示的时候，滚动鼠标（PC端）或滑动页面（移动端）会导致文档滚动。还有在弹出框的高度也大于窗口高度时，滚动鼠标或滑动页面会先滚动弹出框，直到滚动条到头或到尾时，继续滚动弹出框仍然会导致文档的滚动。

这个问题会导致用户在隐藏弹出框返回时，页面显示不是显示弹出框前的位置。解决办法是给这个文档动态设置overflow属性，当显示弹出框时，把文档的overflow属性设置为hidden，而隐藏弹出框时，则把文档的overflow属性恢复。

当然，假如你的页面文档本身overflow属性为hidden，那就不存在滚动的问题。

这里为了方便直接，我只用JavaScript进行演示，最好的方式是通过更改class属性来完成。

JavaScript

// 显示弹出框时
document.documentElement.style.overflowY = ‘hidden‘;

// 隐藏弹出框时
document.documentElement.style.overflowY = ‘auto‘;

版权声明：本文为博主原创文章，未经博主允许不得转载。