转载自:https://segmentfault.com/a/1190000005617307
问题 不多描述,就是fixed弹出层,弹窗滚动条move的时候,弹窗下面的内容也可以滚动。
js 之 touchmove + preventDefault
modal.addEventListener('touchmove', function(e) {
e.preventDefault();
}, false);
这样用 js 阻止滚动后看起来效果不错了,但是也有一个缺点:
弹出层里不能有其它需要滚动的内容(如大段文字需要固定高度,显示滚动条也会被阻止)
解决方案 position: fixed
body.modal-open {
position: fixed;
width: 100%;
}
如果只是上面的 css,滚动条的位置会丢失,弹窗下内容就变成了首屏内容。
所以如果需要保持滚动条的位置需要用 js 保存滚动条位置关闭的时候还原滚动位置
/**
* ModalHelper helpers resolve the modal scrolling issue on mobile devices
* https://github.com/twbs/bootstrap/issues/15852
* requires document.scrollingElement polyfill https://uedsky.com/demo/src/polyfills/document.scrollingElement.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');