zoukankan      html  css  js  c++  java
  • 阻止iOS中页面弹性回滚,只允许div.phone_body的区块有弹性

    使用说明:只要替换选择器:var selector = '.phone_body';

    /**
         * 阻止iOS中页面弹性回滚,只允许div.scroller的区块有弹性
         */
    (function () {
    
        var selector = '.phone_body';
        var u = navigator.userAgent;
    
        if (u.indexOf('Android') > -1 || u.indexOf('Linux') > -1) {//安卓手机
            //alert("安卓手机");
        } else if (u.indexOf('iPhone') > -1) {//苹果手机
            //alert("苹果手机");
            //window.addEventListener("touchmove", handlePageBounce, false);
            //window.addEventListener("touchstart", handlePageBounce, false);
        } else if (u.indexOf('Windows Phone') > -1) {//winphone手机
            //alert("winphone手机");
        }
    
    
        //if ($.os.ios) {
        //    window.addEventListener("touchmove", handlePageBounce, false);
        //    window.addEventListener("touchstart", handlePageBounce, false);
        //}
        function handlePageBounce(evt) {
            if (evt.type === "touchstart") {
                this._startTouchY = evt.touches[0].screenY;
                return;
            }
            var panel = $(evt.target).closest(selector);
            if (panel.length === 0) return evt.preventDefault();
            var el = panel.get(0);
            var canScroll = el.scrollHeight > el.clientHeight;
            var hasTouchOverflow = $(el).computedStyle("-webkit-overflow-scrolling") === "touch";
            var hasOverflow = $(el).computedStyle("overflowY") !== "hidden";
            var height = parseInt($(el).computedStyle("height"), 10);
            if (canScroll && hasTouchOverflow && hasOverflow) {
                var currY = evt.touches[0].screenY;
                var scrollAtTop = ((this._startTouchY <= currY) && (el.scrollTop === 0));
                var scrollAtBottom = ((this._startTouchY >= currY) && ((el.scrollHeight - el.scrollTop) === height));
                if (scrollAtTop || scrollAtBottom)
                    evt.preventDefault();
            } else {
                evt.preventDefault();
            }
        }
    })();
    

      

  • 相关阅读:
    设计模式之单例模式
    设计模式之组合模式
    SVN搭建简单教程
    添加Silverlight应用到HTML
    动态修改配置文件
    Ajax
    jQuery 事件方法
    Java和JavaScript对账户实现掩码并四个一组分隔
    一种简单实现当前时间是否在工作时间内的方法
    Postman接口自动化测试实例用到的完整的SM2前端加密算法代码
  • 原文地址:https://www.cnblogs.com/bwlluck/p/6026092.html
Copyright © 2011-2022 走看看