如何禁用外部元素的滚动？

Question

我在页面中有一个垂直滚动的div也可以垂直滚动.

当使用鼠标滚轮滚动子div并到达滚动条的顶部或底部时,页面(正文)开始滚动.当鼠标在子div上时,我希望页面(正文)滚动被锁定.

这个SO帖子(向下滚动到所选答案)很好地证明了这个问题.

这个SO问题与我的问题基本相同,但选定的答案会导致我的页面内容在滚动条消失并重新出现时明显地水平移动.

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

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

Answer 1

这就是我最终得到的结果。与@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的报告与浏览器实际实现的不同......