javascript - 触摸设备阻止父元素滚动

Question

我已经为这个问题搜索了数百次，但我一直无法找到一个明确的工作答案，所以我把它搁置了一段时间，但现在我回到这个问题上，仍然找不到一个解决方案。

我正在使用以下脚本来防止使用鼠标在浏览器中的父元素上滚动，但是我找不到类似的方法来防止父元素在 TOUCH 设备中滚动。

$(document).on('DOMMouseScroll mousewheel', '.parentunscroll', function(ev) {
    var $this = $(this),
        scrollTop = this.scrollTop,
        scrollHeight = this.scrollHeight,
        height = $this.height(),
        delta = (ev.type == 'DOMMouseScroll' ?
            ev.originalEvent.detail * -40 :
            ev.originalEvent.wheelDelta),
        up = delta > 0;

    var prevent = function() {
        ev.stopPropagation();
        ev.preventDefault();
        ev.returnValue = false;
        return false;
    }

    if (!up && -delta > scrollHeight - height - scrollTop) {
        // Scrolling down, but this will take us past the bottom.
        $this.scrollTop(scrollHeight);
        return prevent();
    } else if (up && delta > scrollTop) {
        // Scrolling up, but this will take us past the top.
        $this.scrollTop(0);
        return prevent();
    }
});

我在这里研究了数十个类似的线程，但找不到一种实际上可以两种方式工作的解决方案:防止父元素在鼠标和触摸事件中滚动到溢出元素中。

希望有人已经做对了；我相信这会帮助很多有同样问题的人。

Answer 1

我没有答案，但由于没有人发帖，我只说说我认为可以做到的方式:
1)在触摸事件上，你有一个滚动事件，但它是在滚动开始后引发的，所以即使你之后纠正了文档滚动位置，屏幕上也会有一些非常烦人的 Action 。
2)我认为要走的路是做与鼠标相同的事情......除了你没有touchscroll事件......所以你必须“手动”检测它并在看到顶部时取消它/底部已经到达。
一个困难的解决方案。

您可能想检查执行此操作的库，但我知道的库会警告您卷轴，但不会让您取消它(就像情况 (1) 一样为时已晚)。

希望有人会建议更简单的方法/正确的库...