마우스가 하위 요소 위에있을 때 본문 스크롤 안 함

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