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中的滚动更有效的解决方案，在滚动子元素时禁用正文滚动。

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';
}

鼠标悬停在子元素

1 个答案: