6. 移动端滚动穿透亲测有效

1. CSS)

body.dialog-open {
  position: fixed;
  width: 100%;
}

2. JS)

(function(){

   var scrollTop = 0;

   // 显示弹出层
   open.onclick = function(){
      
      // 在弹出层显示之前,记录当前的滚动位置
      scrollTop = getScrollTop();
        
      // 使body脱离文档流
      document.body.classList.add('dialog-open'); 
      
      // 把脱离文档流的body拉上去!否则页面会回到顶部!
      document.body.style.top = -scrollTop + 'px';
    
      mask.style.display = 'block';
   }  

   // 隐藏弹出层
   close.onclick = function(){

     mask.style.display = 'none';
     
     // body又回到了文档流中(我胡汉三又回来啦!)
     document.body.classList.remove('dialog-open');
 
     // 滚回到老地方
     to(scrollTop);
   }

   function to(scrollTop){
     document.body.scrollTop = document.documentElement.scrollTop = scrollTop;
   }
   function getScrollTop(){
     return document.body.scrollTop || document.documentElement.scrollTop;
   }

 }()); 

*********3. 附加工具
function fixedBody(){
    var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
    document.body.style.cssText += 'position:fixed;top:-'+scrollTop+'px;';
}

function looseBody() {
    var body = document.body;
    body.style.position = '';
    var top = body.style.top;
    document.body.scrollTop = document.documentElement.scrollTop = -parseInt(top);
    body.style.top = '';
}
 
posted @ 2018-03-14 11:42  大耳朵小虎  阅读(97)  评论(0编辑  收藏  举报