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

Question

我试图在用户使用下面的代码敲击页面的两个特定部分的底部时停止滚动主页面，但它停止了鼠标滚轮的工作在那些divs。

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