Захватывает событие «прокрутка вниз»?

Question

Я проектирую очень простую веб-страницу (только HTML), единственная «функция», которую я хочу реализовать, - это делать что-то, когда пользователь прокручивает страницу вниз, есть ли способ как-то захватить это «событие»?

Answer 1

Если вы не хотите использовать jQuery (чего нельзя было бы сделать для очень простой HTML-страницы), вы можете сделать это, используя обычный Javascript:

<script>
function scrollFunction() {
    // do your stuff here;
}

window.onscroll = scrollFunction;
</script>

Вы упомянули, что хотите что-то сделать, когда они прокрутят вниз страницы - событие onscroll запускает прокрутку в любом направлении, по оси x или y, поэтому ваша функция будет вызвана в любое время они прокручивают.

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

Answer 2

Вы не можете сделать это только с помощью HTML, вам нужно использовать Javascript.Я рекомендую использовать jQuery , чтобы ваше решение могло выглядеть следующим образом:

$(document).ready(function() {
    $(window).scroll(function() {
      // do whatever you need here.
    });
});

Если вы не хотите или не можете использовать jQuery , вы можете использоватьonscroll решение от Энтони.

Answer 3

Лучший способ - проверять не только события прокрутки, но и прокрутку направления, как показано ниже;

$(window).bind('mousewheel', function(event) {
if (event.originalEvent.wheelDelta >= 0) {
    console.log('Scroll up');
}
else {
    console.log('Scroll down');
}
});

Answer 4

Просто для полноты, есть другое решение, использующее другую платформу JS (Mootools)

window.addEvent('scroll',function(e) {
    //do stuff
});

Answer 5

Вы можете просто использовать это

window.addEvent('scroll',function(e) {
    if (document.body.scrollTop > 50 || document.documentElement.scrollTop > 50) {
            // enter code here
        }
});

Answer 6

Это работает для меня.

var previousPosition

$(window).scroll(function(){
  var currentScrollPosition=$(window).scrollTop() + $(window).height()
  if (currentScrollPosition>previousScrollPosition) {
    console.log('down')
  }else if(currentScrollPosition<previousScrollPosition){
    console.log('up')
  }
  previousScrollPosition=currentScrollPosition
});