阻止iOS中页面弹性回滚，只允许div.phone_body的区块有弹性

Posted 2020-08-17 阳光总在风雨后

使用说明：只要替换选择器：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();
        }
    }
})();