Question

我有一个样式overflow-y: scroll;的文档部分。在这个元素中，我可以滚动。问题是当达到此部分的底部时，滚动事件将应用于文档，并且页面将快速向下推进。我需要允许此部分滚动到该部分的结尾，其中事件被暂停。然后，一旦用户启动另一个滚动事件，就允许文档像往常一样滚动。

编辑：以下是我试过的一些代码。

$('#activity_widget').bind('mousewheel DOMMouseScroll', function(e) {
    var scrollTo = null;

    if (e.type == 'mousewheel') {
      console.log(e.originalEvent.wheelDelta);

        if (last_y == e.screenY){
          // alert('halt!');
          scrollTo = (e.originalEvent.wheelDelta * -1);
        }
        last_y = e.screenY;

        // scrollTo = (e.originalEvent.wheelDelta * -1);
    }

    if (scrollTo) {
        e.preventDefault();
        $(this).scrollTop(scrollTo + $(this).scrollTop());
    }
});

Answer 1

你可以这样做：
http://jsfiddle.net/1vb8yh0L/

关于这一点的可悲部分是你将覆盖用户滚动量，大多数人不会改变这一点，但在你的操作系统中你可以改变滚轮上每一步的价值。有可能用javascript获取此信息，但我不知道如何。你可以做的另一件事是跟踪这些事件$（this）.scrollTop（）和之前的差异并将其作为绝对数量存储并将其用作滚动量。如果用户使用鼠标滚动一次，然后使用滚动条滚动，然后再次使用鼠标滚动，则必须处理会发生的情况，这可能会变得相当复杂，所以我在示例中省略了这一点。

脚本（没有小提琴）：

$('#activity_widget').bind('mousewheel DOMMouseScroll', function(e) {
    e.preventDefault();
    var scrollTop = $(this).scrollTop();
    var scrollAmount = 70;

    if (e.originalEvent.wheelDelta >= 0) {
        $(this).scrollTop(scrollTop - scrollAmount);
    }
    else {
        $(this).scrollTop(scrollTop + scrollAmount);
    }
});

Answer 2

逻辑应该尽可能简单：

如果鼠标悬停在您的容器上并且它滚动您的容器 - 滚动它（不要阻止事件，否则您应该使用scrollTop手动模拟滚动），但设置标志以防止文档滚动（如果到达顶部/底部）
如果鼠标位于容器上方并且无法在滚动方向上滚动（到达顶部/底部） - 请检查是否可以滚动文档。如果不能 - 阻止滚动事件。
在这两种情况下，您应该在一段时间后重置标志以允许用户继续滚动文档

Example：

jQuery(function ($) {
    var allowDocumentScroll = true;
    var timer = 0;

    function enableDocumentScrollAfterPause() {
        clearTimeout(timer);
        timer = setTimeout(function () {
            allowDocumentScroll = true;
        }, 300);
    }

    $('.content').on('mousewheel DOMMouseScroll', function (event) {
        var delta = event.originalEvent.wheelDelta * -1 || event.originalEvent.detail; // - up, + down
        var element = $(this);
        var maxScroll = element.prop('scrollHeight') - element.height();

        if ((delta < 0 && $(this).scrollTop() > 0) || (delta > 0 && $(this).scrollTop() < maxScroll)) {
            allowDocumentScroll = false;
            enableDocumentScrollAfterPause();
            return;
        }

        if (!allowDocumentScroll) {
            event.preventDefault();
            enableDocumentScrollAfterPause();
        }
    });
});

阻止来自＆＃34;溢出的滚动事件＆＃34;进入体内

2 个答案: