Не работает window.scrollY

Question

Всем привет. Проблемы две:

Не работает addeventlistener scroll - вообще не срабатывает. Из-за этого пришлось сделать конструкцию ниже - она работает.
Основная проблема - при попытке вызвать window.scrollY я всегда получаю 0.

Пробовал ставить общему блоку высоту auto, пробовал везде убирать height: 100% и в целом попробовал все доступные решения из интернета. Если нужна будет какая-то дополнительная информация, то я скину.

function userScrolling(event) {
  let scrollDistance = window.scrollY;
  console.log(window.scrollY)
}

function disableScroll() {
  if (window.addEventListener) // older FF
    window.addEventListener('DOMMouseScroll', userScrolling, false);
  window.onwheel = userScrolling; // modern standard
  window.onmousewheel = document.onmousewheel = userScrolling; // older browsers, IE
  window.ontouchmove = userScrolling; // mobile
}
disableScroll();

Answer 1

for (let i = 0; i < 30; i++) document.body.insertAdjacentHTML('beforeend', `<div>${i}</div>`);

const $span = document.querySelector(`span`);

addEventListener(`scroll`, () => $span.innerHTML = `x:${window.scrollX}, y:${window.scrollY}`);

div {
  margin-bottom: 1rem;
  background-color: lightgray;
  padding: 1rem;
  width: 200%;
}

span {
  position: fixed;
  top: 1rem;
  left: 1rem;
  padding: 1rem;
  background-color: white;
  border: 1px dashed purple;
}

<span></span>

Answer 2

Описанная вами конструкция

window.addEventListener('scroll', function(e) {});

точно рабочая. У нее широкая совместимость, согласно документации: Document: событие scroll. Ниже пример, демонстрирующий работу этого события.

window.addEventListener('scroll', function(e) {
  document.querySelector('p').innerText = 'window.scrollY: ' + window.scrollY;
});

body {
  background-color: #ccffff;
  border: 1px dashed #ccc;
  height: 800px;
  position: relative;
}

p {
  position: fixed;
  top: 0;
  left: 16px;
}

<p>window.scrollY: 0</p>

Теперь к вопросу о том, почему вы всегда получаете 0. Это может происходить в том случае, если никакой документа прокрутки на самом деле не происходит. Например, в вашем примере в консоли всегда будет 0, так как при скроле не происходит смещения документа по вертикали. Смещения по вертикали не происходит, так как у документа не задана высота, больше чем отображаемая область и документ не содержит никакого контента, который мог бы его растянуть автоматически.

Пробовал ставить общему блоку высоту auto

Это наталкивает на мысль о том, что вам нужно считать количество пикселей, прокрученных от верха элемента, а не документа. Для этого есть свойство scrollTop.

Разницу между scrollY и scrollTop вы можете наблюдать в примере ниже. Обратите внимание, что во время прокрутки содержимого контейнера, scrollY не меняется, так как документ не смещается по вертикали.

let p = document.querySelector('p'),
  span = document.querySelector('span'),
  container = document.querySelector('.container');

window.addEventListener('scroll', function(e) {
  p.innerText = 'window.scrollY: ' + window.scrollY;
});

container.addEventListener('scroll', function(e) {
  span.innerText = 'container.scrollTop: ' + container.scrollTop;
});

body {
  background-color: #ccffff;
  border: 1px dashed #ccc;
  height: 800px;
  position: relative;
}

p {
  position: fixed;
  bottom: 16px;
  left: 16px;
  margin: 0;
}

span {
  position: fixed;
  bottom: 16px;
  right: 16px;
}

.container {
  background-color: cyan;
  max-height: 80px;
  padding: 8px;
  overflow-y: scroll;
}

.content {
  background-color: lightgreen;
  width: 80px;
  height: 160px;
}

<p>window.scrollY: 0</p>
<span>container.scrollTop: 0</span>
<div class="container">
  <div class="content">
  </div>

БЛОГ НА HUSL

Не работает window.scrollY

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