Open mask2012 opened 6 years ago
body.modal-open {
position: fixed;
width: 100%;
}
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');
在modalOpen时调用ModalHelper.afterOpen(); 在modalClose时调用ModalHelper.beforeClose(); 网址链接:https://uedsky.com/2016-06/mobile-modal-scroll/ https://segmentfault.com/a/1190000005617307
also nice solution! 感谢你的分享!
此解决方案完全是张鑫旭大神的转载,原文在此 https://www.zhangxinxu.com/wordpress/2016/12/web-mobile-scroll-prevent-window-js-css/
工作中遇到弹出一个浮层,并且此浮层自带滚动条时,浮层的滚动会引起下边窗口滚动条的滚动,解决这个用简单的办法做不到。
还是张鑫旭大神想得比较周到,一剂药下去,药就除了,把这个写到公共方法里,爽得不行
调用时是这样的