マウスが子要素の上にあるときに本文をスクロールしない

Question

次のコードを使用してページの2つの特定のセクションの下部にヒットすると、メインページがスクロールするのを止めようとしていますが、それらの部門全体で

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