弹窗滚动，禁止底部滚动

解决方案 position: fixed

body.modal-open {

position: fixed;

width: 100%;

}

如果只是上面的 css，滚动条的位置同样会丢失
所以如果需要保持滚动条的位置需要用 js 保存滚动条位置关闭的时候还原滚动位置

 

var ModalHelper = (function(bodyCls) {

var scrollTop;

return {

afterOpen: function() {

scrollTop = document.scrollingElement.scrollTop;

document.body.classList.add(bodyCls);

document.body.style.top = -scrollTop + 'px';

},

beforeClose: function() {

document.body.classList.remove(bodyCls);

// scrollTop lost after set position:fixed, restore it back.

document.scrollingElement.scrollTop = scrollTop;

}

};

})( 'modal-open');

 

弹窗出现后，记住当前页面滚动距离，关闭弹窗时，将页面滚动到之前记录的滚动距离

 

转载于:https://www.cnblogs.com/itliulei/p/10297653.html