當鼠標懸停在子元素上時不滾動主體

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