Не срабатывает событие scroll

107

17 декабря 2020, 21:20

$(document).on("scroll", "div", function() { 
  console.info('scroll'); 
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
<div style="overflow:scroll;height:100px"> 
Text<br>Text<br>Text<br>Text<br>Text<br>Text<br>Text<br>Text<br>Text<br>Text<br>Text<br>Text<br>Text<br>Text<br>Text<br>Text<br>Text<br>Text<br>Text<br>Text<br>Text<br>Text<br>Text<br> 
</div>

Пытаюсь поймать событие scroll через on, но страница прокручивается, а событие не срабатывает. В чём может быть проблема?

Answer 1

document.addEventListener('scroll', function(event) { 
  if (event.target.id === 'scroll') { 
    console.log('scrolling', event.target); 
  } 
}, true);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
<div style="overflow:scroll;height:100px" id="scroll"> 
  Text<br>Text<br>Text<br>Text<br>Text<br>Text<br>Text<br>Text<br>Text<br>Text<br>Text<br>Text<br>Text<br>Text<br>Text<br>Text<br>Text<br>Text<br>Text<br>Text<br>Text<br>Text<br>Text<br> 
</div>

Answer 2

Проблема заключается в том, что событие scroll не всплывает. Из-за этого вариант с jquery не работает, так как событие не доходит до элемента, на который вешается обработчик.

Для решения можно воспользоваться возможностью поставить обработчик на фазу захвата. Это можно сделать с помощью третьего параметра addEventListener