16

我在一个也垂直滚动的页面中有一个垂直滚动的 div。

当子 div 用鼠标滚轮滚动并到达滚动条的顶部或底部时，页面（正文）开始滚动。当鼠标悬停在子 div 上时，我希望页面（正文）滚动被锁定。

这个 SO 帖子（向下滚动到选定的答案）很好地说明了这个问题。

这个 SO 问题与我的基本相同，但所选答案导致我的页面内容随着滚动条的消失和重新出现而明显水平移动。

我认为可能有一个利用 event.stopPropagation() 的解决方案，但无法使任何工作。在 ActionScript 中，这种事情可以通过在子 div 上放置一个鼠标滚轮处理程序来解决，该处理程序在事件到达 body 元素之前调用 stopPropagation()。由于 JS 和 AS 都是 ECMAScript 语言，我认为这个概念可以翻译，但它似乎不起作用。

有没有一种解决方案可以防止我的页面内容四处移动？最有可能使用 stopPropagation 而不是 CSS 修复？欢迎 JQuery 答案和纯 JS 一样。

4

4 回答 4

4

这就是我的结果。与@mrtsherman 的答案非常相似，只有纯 JS 事件而不是 jQuery。不过，我仍然使用 jQuery 来选择和移动子 div。

// earlier, i have code that references my child div, as childDiv

function disableWindowScroll () {
    if (window.addEventListener) {
        window.addEventListener("DOMMouseScroll", onChildMouseWheel, false);
    }
    window.onmousewheel = document.onmousewheel = onChildMouseWheel;
}

function enableWindowScroll () {
    if (window.removeEventListener) {
        window.removeEventListener("DOMMouseScroll", onArticleMouseWheel, false);
    }
    window.onmousewheel = document.onmousewheel = null;
}

function onChildMouseWheel (event) {
    var scrollTgt = 0;
    event = window.event || event;
    if (event.detail) {
        scrollTgt = -40 * event.detail;
    } else {
        scrollTgt = event.wheelDeltaY;
    }

    if (scrollTgt) {
        preventDefault(event);
        $(childDiv).scrollTop($(childDiv).scrollTop() - scrollTgt);
    }
}

function preventDefault (event) {
    event = event || window.event;
    if (event.preventDefault) {
        event.preventDefault();
    }
    event.returnValue = false;
}

我注意到滚动与正常滚动不完全匹配；它似乎比没有这段代码滚动得快一点。我想我可以通过敲下 wheelDeltaY 来修复它，但奇怪的是，javascript 报告的方式与浏览器实际实现的方式不同......

于 2012-02-13T07:13:12.883 回答
1

我通常用一个小技巧来监听文档上的滚动事件：它将滚动高度重置为原始高度 - 有效地冻结文档滚动，但任何内部元素溢出：auto 仍然可以很好地滚动：

var scrollTop = $(document).scrollTop();
$(document).on('scroll.scrollLock', function() {
  $(document).scrollTop(scrollTop);
});

然后当我完成内部滚动锁时：

$(document).off('scroll.scrollLock');

.scrollLock 事件命名空间确保我不会在滚动时干扰任何其他事件侦听器。

于 2014-05-15T10:41:49.453 回答
0

虽然这是一个老问题，但这里是我用 jQuery 做的。这允许您在外部列表中滚动列表，或者您可以将外部列表更改为文档以执行 OP 要求的操作。

window.scrollLockHolder = null;
function lockScroll(id){
    if (window.scrollLockHolder == null){
        window.scrollLockHolder = $('#' + id).scrollTop();
    }
    $('#' + id).on('scroll', function(){
        $('#' + id).scrollTop(window.scrollLockHolder);
    });
}
function unlockScroll(id){
    $('#' + id).off('scroll');
    window.scrollLockHolder = null;
}

你可以像这样使用它：

<ul onmousemove="lockScroll('outer-scroller-id')" onmouseout="unlockScroll('outer-scroller-id')">
    <li>...</li>
    <li>...</li>
</ul>
于 2016-12-05T22:45:12.620 回答
-2

那这个呢：

div.onmousemove = function() { // may be onmouseover also works fine
    document.body.style.overflow = "hidden";
    document.documentElement.style.overflow = "hidden";
};

div.onmouseout = function() {
    document.body.style.overflow = "auto";
    document.documentElement.style.overflow = "auto";
};
于 2012-02-13T06:46:05.233 回答