Поймать скролл на чистом JS

Question

$(function() {
    $(window).scroll(function() {
        if ($(this).scrollTop() == 400) {
            load();
        }
    });
});

Подскажите, пожалуйста, как аналогичное сделать на чистом JS?

Answer 1

Используйте событие scroll и свойство scrollY

window.addEventListener('scroll', function(e) {
    if (this.scrollY == 400) {
        load();
    }
});

Answer 2

if(this.scrollTop == 400) { alert('test'); } не работает

Может и не сработать, потому что скролл движется с определённым шагом и ровно 400 пикселей может никогда и не выпасть.

По этому будем проверять на то, "перескочили" ли мы этот предел в 400 пикселей.
Но простое условие if(scroll > 400) будет выполняться каждый раз после 400.

Используем для этого булевевое значение и будем его изменять после "перескока".
if(scroll > 400 && boolean === false) boolean = true; - после такой проверки скрипт выполниться один раз.

var eScroll = 400,  // После скольки пикселей запустить что-то
    is400px = false; // Чтобы скрипт не срабатывал каждый раз после 400px
    
window.addEventListener('scroll', function(){
  console.clear();
  console.info(this.scrollY);
  
  if(this.scrollY >= eScroll && is400px === false) {
    is400px = true;
    load();
  }
});

function load() {
  document.body.style.backgroundColor = 'gray';
}

body {
  height: calc(500px + 100vh);
}

Так же обратите внимание на то, какое число будет указанно в консоли.

БЛОГ НА HUSL

Поймать скролл на чистом JS

Ответы (2 шт):