关于自定义弹窗有滚动条时，滚动穿透到body滚动条的解决方案

1，弹窗弹起时给body设置fixed定位，然后通过设置top属性，配合后面的top属性使用，如下所示：

body.modal-open {
    position: fixed;
}

2，打开modal弹窗前获取到当前滚动元素scrollingElement的scrollTop（也就是滚动条的位置），并且给body元素（也就是当前滚动元素，不一定非得是body）添加'modal-open'的类名，同时设置top的值，这也是上面为什么要用到fixed定位的原因。 如下所示：

var scrollTop = document.scrollingElement.scrollTop; // 保存起来方便关闭弹窗时使用
document.body.classList.add('modal-open');
document.body.style.top = -scrollTop + 'px'; // 注意，这里是负值才是期望的效果

3，关闭弹窗时，首先remove 'modal-open'类名，然后还原scrollingElement属性的scrollTop的值。 如下所示：

document.body.classList.remove('modal-open');
document.scrollingElement.scrollTop = scrollTop; // 这个就是打开时保存的scrollTop

以上就是本人结合网上各种解决方法总结的在遇到弹窗弹起时，滚动条穿透的解决方案，大概思路就是弹窗弹起时给body设置fixed定位，然后获取到scrollTop作为top属性还原当前位置，最后关闭弹窗时取消fixed定位并且还原当时的scrollTop值。希望能帮到同被此问题困扰的朋友。