Не прокручивайте тело, когда мышь находится над дочерним элементом

Question

Я пытаюсь остановить прокрутку моей главной страницы, когда пользователь попадает в нижнюю часть двух отдельных разделов страницы, используя следующий код, но он останавливает колесо мыши от работы над этими дивизиями вообще.

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