jquery - 禁用橡皮筋效果但仍允许使用 jquery 滚动

Question

我正在尝试制作响应式网站，但我正在为如何在 iOS 设备上禁用橡皮筋效果而苦苦挣扎。禁用它的原因是想让它更像一个应用程序而不是一个网站。

我找到了一些代码，但它已经很旧了，似乎没有人再回答它了，所以我把我得到的东西放在一个 fiddle 里，我希望有人能提供帮助。

我想要的是一个允许用户向下滚动然后在到达顶部或底部时停止的页面，没有橡皮筋。

这是我找到的代码

(function registerScrolling($) {
var prevTouchPosition = {},
    scrollYClass = 'scroll-y',
    scrollXClass = 'scroll-x',
    searchTerms = '.' + scrollYClass + ', .' + scrollXClass;

$('body').on('touchstart', function (e) {
    var $scroll = $(e.target).closest(searchTerms),
        targetTouch = e.originalEvent.targetTouches[0];

    // Store previous touch position if within a scroll element
    prevTouchPosition = $scroll.length ? { x: targetTouch.pageX, y: targetTouch.pageY } : {};
});

$('body').on('touchmove', function (e) {
var $scroll = $(e.target).closest(searchTerms),
    targetTouch = e.originalEvent.targetTouches[0];

if (prevTouchPosition && $scroll.length) {
    // Set move helper and update previous touch position
    var move = {
        x: targetTouch.pageX - prevTouchPosition.x,
        y: targetTouch.pageY - prevTouchPosition.y
    };
    prevTouchPosition = { x: targetTouch.pageX, y: targetTouch.pageY };

    // Check for scroll-y or scroll-x classes
    if ($scroll.hasClass(scrollYClass)) {
        var scrollHeight = $scroll[0].scrollHeight,
            outerHeight = $scroll.outerHeight(),

            atUpperLimit = ($scroll.scrollTop() === 0),
            atLowerLimit = (scrollHeight - $scroll.scrollTop() === outerHeight);

        if (scrollHeight > outerHeight) {
            // If at either limit move 1px away to allow normal scroll behavior on future moves,
            // but stop propagation on this move to remove limit behavior bubbling up to body
            if (move.y > 0 && atUpperLimit) {
                $scroll.scrollTop(1);
                e.stopPropagation();
            } else if (move.y < 0 && atLowerLimit) {
                $scroll.scrollTop($scroll.scrollTop() - 1);
                e.stopPropagation();
            }

            // If only moving right or left, prevent bad scroll.
            if(Math.abs(move.x) > 0 && Math.abs(move.y) < 3){
              e.preventDefault()
            }

            // Normal scrolling behavior passes through
        } else {
            // No scrolling / adjustment when there is nothing to scroll
            e.preventDefault();
        }
    } else if ($scroll.hasClass(scrollXClass)) {
        var scrollWidth = $scroll[0].scrollWidth,
            outerWidth = $scroll.outerWidth(),

            atLeftLimit = $scroll.scrollLeft() === 0,
            atRightLimit = scrollWidth - $scroll.scrollLeft() === outerWidth;

        if (scrollWidth > outerWidth) {
            if (move.x > 0 && atLeftLimit) {
                $scroll.scrollLeft(1);
                e.stopPropagation();
            } else if (move.x < 0 && atRightLimit) {
                $scroll.scrollLeft($scroll.scrollLeft() - 1);
                e.stopPropagation();
            }
            // If only moving up or down, prevent bad scroll.
            if(Math.abs(move.y) > 0 && Math.abs(move.x) < 3){
              e.preventDefault();
            }

            // Normal scrolling behavior passes through
        } else {
            // No scrolling / adjustment when there is nothing to scroll
            e.preventDefault();
        }
    }
} else {
    // Prevent scrolling on non-scrolling elements
    e.preventDefault();
}
});
})(jQuery);

Answer 1

您也可以在 HTML+JS 端执行此操作，前提是 HTML 文档不高于 WebView 视口(viewport)(又名 JS 中的 window.height)。您可以通过在适当的时间调用 'touchmove' 事件的 preventDefault 来做到这一点(即当元素及其所有父元素在用户开始移动手指的方向上没有任何内容可滚动时)。

我将向您展示实际的代码，不使用 jQuery ...但您必须自己实现 Q.addEventListener 和 Q.removeEventListener(或使用 jQuery)。

var Q = {
    preventTouchScrolling: function () {
        Q.addEventListener(window, 'touchmove', _touchScrollingHandler);
    },

    restoreTouchScrolling: function () {
        Q.removeEventListener(window, 'touchmove', _touchScrollingHandler);
    },
    Pointer: {
        /**
         * Consistently prevents the default behavior of an event across browsers
         * @static
         * @method preventDefault
         * @param {Event} e Some mouse or touch event from the DOM
         * @return {Boolean} Whether the preventDefault succeeded
         */
        preventDefault: function (e) {
            if (('cancelable' in e) && !e.cancelable) {
                return false;
            }
            e.preventDefault ? e.preventDefault() : e.returnValue = false;
            return true;
        },

        /**
         * Returns the document's scroll top in pixels, consistently across browsers
         * @static
         * @method scrollTop
         * @return {Number}
         */
        scrollTop: function () {
            return window.pageYOffset || document.documentElement.scrollTop || (document.body && document.body.scrollTop);
        },

        /**
         * Returns the y coordinate of an event relative to the document
         * @static
         * @method getY
         * @param {Event} e Some mouse or touch event from the DOM
         * @return {Number}
         */
        getY: function(e) {
            var oe = e.originalEvent || e;
            oe = (oe.touches && oe.touches.length)
                ? oe.touches[0]
                : (oe.changedTouches && oe.changedTouches.length
                    ? oe.changedTouches[0]
                    : oe
                );
            return Math.max(0, ('pageY' in oe) ? oe.pageY : oe.clientY + Q.Pointer.scrollTop());
        },
    }
};

function _touchScrollingHandler(event) {
    var p = event.target;
    var pos;
    var scrollable = null;
    do {
        if (!p.computedStyle) {
            continue;
        }
        var overflow = p.computedStyle().overflow;
        var hiddenHeight = p.scrollHeight - p.offsetHeight;
        var s = (['hidden', 'visible'].indexOf(overflow) < 0);
        if ((s || p.tagName === 'HTML') && hiddenHeight > 0) {
            if ((Q.Pointer.movement.positions.length == 1)
            && (pos = Q.Pointer.movement.positions[0])) {
                var sy = Q.Pointer.getY(event)
                    + Q.Pointer.scrollTop();
                if ((sy > pos.y && p.scrollTop == 0)
                || (sy < pos.y && p.scrollTop >= hiddenHeight)) {
                    continue;
                }
            }
            scrollable = p;
            break;
        }
    } while (p = p.parentNode);
    if (!scrollable) {
        Q.Pointer.preventDefault(event);
    }
}