Запуск функции после прокрутки x пикселей сверху

Question

Я хотел бы вызвать что-то один раз (и только один раз), когда пользователь прокрутил вниз на 100 пикселей сверху.

В прошлом мне давали этот код, но, похоже, он не работает?

window.onscroll = function() {
  var scrollLimit = 100;
  var scrollValue = document.body.scrollTop;
  if (scrollValue >= scrollLimit) {
    alert("x")
  }
};

Answer 1

Вы используете неправильное свойство здесь.

Вместо свойства scrollTop необходимо использовать свойство Window.scrollY.

Вот как должен быть ваш код:

window.onscroll = function() {
  var scrollLimit = 100;
  if (window.scrollY >= scrollLimit) {
    alert("x")
  }
};

Примечание:

window.scrollY проблемы совместимости с IE:

К сожалению window.scrollY не работает с браузерами IE, для IE вы можете использовать window.pageYOffset в качестве замены, но он всегда дает сотни округленных значений (100, 200, 300, ...).

В противном случае вы можете проверить принятый ответ здесь в качестве обходного пути используется document.documentElement.scrollTop.

Answer 2

scrollTop даст вам смещение между верхней частью элемента и верхней частью документа.Поскольку тело html-документа по умолчанию начинается с верхней части документа, body.scrollTop всегда остается равным 0, если вы специально не использовали css, чтобы тело не начиналось с верхней части.

Поэтому вам нужно использовать scrollY вместо scrollTop.Если используемый вами браузер не поддерживает scrollY (например, IE), вы можете попробовать pageYOffset.

Answer 3

Попробуйте это:

var scrollValue = window.scrollY;