javascript - 当鼠标悬停在子元素上时不要滚动主体

Question

当用户使用以下代码点击页面的两个特定部分的底部时，我试图阻止我的主页滚动，但它根本阻止鼠标滚轮在这些 div 上工作。

 var scroller = document.querySelector('#Filters');

    scroller.addEventListener('wheel', listener);

function listener(event)
    {
        var elem = event.currentTarget;

        if ((event.deltaY < 0 && elem.scrollTop === 0) ||
            (event.deltaY > 0 && elem.offsetHeight + elem.scrollTop >= elem.scrollHeight))
        {
            event.preventDefault();
        }
        else if ((event.deltaX < 0 && elem.scrollLeft === 0) ||
            (event.deltaX > 0 && elem.offsetWidth + elem.scrollLeft >= elem.scrollWidth))
        {
            event.preventDefault();
        }
    }

Answer 1

你可以使用比在js中重新计算滚动更高效的解决方案，在滚动子元素时禁用body滚动。

HTML:

<div onmouseover="disableScroll();" onmouseout="enableScroll();">
    content
</div>

JS:

var body = document.getElementsByTagName('body')[0];
function enableScroll() {
    body.style.overflowY = 'auto';
}
function disableScroll() {
    body.style.overflowY = 'hidden';
}