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

我已经在这里查看了几十个类似的线程，但是找不到实际上有两种方式工作的解决方案：在BOTH鼠标和触摸事件上防止父进行滚动。

希望有人已经做到了这一点;我相信这会帮助很多人提出同样的问题。

Answer 1

我没有答案，但由于没有人发帖，我只会说出我认为可以这样做的方式：
1）在触摸事件中，你有一个滚动事件，但是在滚动开始后它会被提升，所以即使你之后更正了文档滚动位置，屏幕上也会有一些非常烦人的动作。
2）我认为要走的路是做与鼠标相同的...除了你没有触摸滚动事件...所以你必须“手动”检测它并取消它如果你看到顶部/ bottom已经到达。
一个困难的解决方案。

您可能想检查那些执行此操作的库，但我知道的库会警告您滚动，但不会让您取消它（就像在案例（1）中一样太晚了。）

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

触摸设备阻止父元素滚动

1 个答案: