移动端滚动穿透问题完美解决方案

问题

众所周知,移动端有fixed遮罩或弹出层是,在屏幕上滑动能够带动底层背景内容的滑动,这就是所谓的移动端的穿透问题

解决方案 position:fiexd

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://segmentfault.com/a/1190000005617307