• h5页面ios,双击向上滑动,拖拽到底部还能继续拖拽(露出黑色背景)


    h5页面ios,双击向上滑动,拖拽到底部还能继续拖拽

    标签: 手机
     

    在ios下,双击屏幕某些地方,滚动条会自动向上走一段。

    当用微信看h5的时候,拖拽到底部,会漏出来,微信自带下面的灰黑色皮肤。

    用js解决一下吧,这俩问题很类似,总结到一起了。

    ----------特别注意,安卓没有发生过这些情况,因为解决办法是给最外层的wrapper,overflow-y:auto;也就是放弃了原生的滚动条,所以解决的时候要判断一下系统,安卓就不用处理了。

    html部分:----------------------------

    <body>

    <div class="wrapper">

         <section>内容部分aaaa111</section>

         <section>内容部分aaaa222</section>

         <section>内容部分aaaa333</section>

    </div>

    </body>

    css部分:--------------------------

    .wrapper2{
      position:absolute;
      top:0;
      bottom:0;
      left:0;
      right:0; 
      overflow-y:auto;
      -webkit-overflow-scrolling : touch; 
    }

    js部分:----------------------------

    /*阻止ios拖拽到底部还能继续拖拽*/

    var ScrollFix = function(elem) {
        // Variables to track inputs
        var startY, startTopScroll;
        
        elem = elem || document.querySelector(elem);
        
        // If there is no element, then do nothing    
        if(!elem)
            return;

        // Handle the start of interactions
        elem.addEventListener('touchstart', function(event){
            startY = event.touches[0].pageY;
            startTopScroll = elem.scrollTop;
            
            if(startTopScroll <= 0)
                elem.scrollTop = 1;

            if(startTopScroll + elem.offsetHeight >= elem.scrollHeight)
                elem.scrollTop = elem.scrollHeight - elem.offsetHeight - 1;
        }, false);
    };

    /*判断设备调用ScrollFix*/

    var sUserAgent=navigator.userAgent.toLowerCase();
    if(sUserAgent.match(/iphone os/i) == "iphone os"){
        $('.wrapper').addClass('wrapper2');
        ScrollFix($('.wrapper2')[0]); 
    }

    /*阻止用户双击使屏幕上滑*/
    var agent = navigator.userAgent.toLowerCase();        //检测是否是ios
    var iLastTouch = null;                                //缓存上一次tap的时间
    if (agent.indexOf('iphone') >= 0 || agent.indexOf('ipad') >= 0)
    {
        document.body.addEventListener('touchend', function(event)
        {
            var iNow = new Date()
                .getTime();
            iLastTouch = iLastTouch || iNow + 1 /** 第一次时将iLastTouch设为当前时间+1 */ ;
            var delta = iNow - iLastTouch;
            if (delta < 500 && delta > 0)
            {
                event.preventDefault();
                return false;
            }
            iLastTouch = iNow;
        }, false);
    }

  • 相关阅读:
    XHR 学习整理
    IT职业规划与行业分析(转)
    hibernate的native sql查询(转)
    关于html selection 的经典示例
    html Selection
    javaWeb网购系统
    随笔,java我差很多
    系统架构:Web应用架构的新趋势---前端和后端分离的一点想法(转)
    oracle11g 重装操作系统后,如何利用原有oracle表空间文件还原数据库
    myeclipse maven 安装
  • 原文地址:https://www.cnblogs.com/lxg0/p/5804690.html
Copyright © 2020-2023  润新知