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();
            }
        }
    })();
    

      

  • 相关阅读:
    Android--adb
    Android 爬坑之路
    Android倒计时实现
    Android Studio常用设置
    Java Web开发——MySQL数据库的安装与配置
    DOS命令(系统错误5,拒绝访问)的解决方法
    Java EE开发环境——MyEclipse2017破解 和 Tomcat服务器配置
    设计模式-工厂模式
    设计模式-简单工厂模式
    设计模式简介
  • 原文地址:https://www.cnblogs.com/bwlluck/p/6026092.html
Copyright © 2011-2022 走看看