zoukankan      html  css  js  c++  java
  • 6. 移动端滚动穿透亲测有效

    1. CSS)

    body.dialog-open {
      position: fixed;
       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 = '';
    }
     
  • 相关阅读:
    OpenCV 立体匹配 (自带程序)
    OpenCV 双目标定 ( 自带的例子)
    容器
    OpenCV 多边形逼近
    C++ 读取文件
    OpenCV 快速连通区域分析
    图像任意旋转
    OpenCV 模板匹配函数matchTemplate详解
    二十一:scrapy中设置下载延时与自动限速
    二十、scrapy中的Request对象和Response对象
  • 原文地址:https://www.cnblogs.com/wangrui38/p/8566494.html
Copyright © 2011-2022 走看看