zoukankan      html  css  js  c++  java
  • 移动端弹出层滚动穿透问题总结

    移动端弹出层(简称layer)时,层内有大量文字需要滚动,但是背景层(简称body)会随着layer的滚动而滚动,用户体验较差。参考了网上的一些资料,总结解决方案如下:

    .scrollFix{
      height: 100%;
      overflow: hidden;
      position: relative;
    }
    .scrollFix body{
      height: 100%;
      overflow: hidden;
    }

    弹出层前:

    //防止body层向下滚动后出现内容显示不全的问题
    $('html,body').animate({scrollTop: 0}, 100);

    $('html').addClass('scrollFix');

    弹出层关闭后(一般是层的关闭回调):

    $('html').removeClass('scrollFix');

    还有一种禁用背景层touchmove事件的方法

    function ShowLayer(){
      bgDom.ontouchmove=function(e){
        e.preventDefault && e.preventDefault();
        e.returnValue=false;
        e.stopPropagation && e.stopPropagation();
        return false;
      }
    }
    或者
    function fScrollFix(e){
      e.preventDefault();
      e.stopPropagation();
    }
    bgDom.addEventListener('touchmove',fScrollFix,false);


    function CloseLayer()
    {
      bgDom.ontouchmove=function(e){
        e.preventDefault && e.preventDefault();
        e.returnValue=true;
        e.stopPropagation && e.stopPropagation();
        return true;
      }
    }
    或者
    bgDom.removeEventListener('touchmove',fScrollFix,false);

    bgDom为背景层dom对象,此方案笔者实验未成功

    参考:http://segmentfault.com/q/1010000003089816

       http://www.w3cfuns.com/article-5600528-1-1.html

       http://zhangzhaoaaa.iteye.com/blog/2105145

  • 相关阅读:
    10、驱动中的阻塞与非阻塞IO
    8、Linux设备驱动的并发控制
    入职一个月考核学习
    5、映射的思考
    6、udev机制
    7、字符设备系统
    linux 内存管理之kmalloc、vmalloc、malloc、get_gree_pages的区别
    嵌入式笔试题(linux基础)
    驱动总结
    系统移植总结
  • 原文地址:https://www.cnblogs.com/mengff/p/4923990.html
Copyright © 2011-2022 走看看