Слушатель onscroll, направление

Question

onscroll

Срабатывает когда крутим туда суда...

Как узнать, событие сработало, необходимо понять в какое направление. Вверх либо вниз?

Можно объявить переменную и сравнивать последующее с предыдущим. Но я ищу решение более практичное, возможно есть что та по дефолту подобное?

Смотрел объект, в нем нет отличия, что вверх что в низ...

Answer 1

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Scroll Direction</title>
  <style>
    body {
      height: 2000px; /* Чтобы было что скролить */
      margin: 0;
    }
    .indicator {
      position: fixed;
      top: 10px;
      left: 10px;
      padding: 10px;
      background: rgba(0, 0, 0, 0.7);
      color: white;
      font-size: 18px;
      z-index: 1000;
    }
  </style>
</head>
<body>

<div class="indicator" id="indicator">Scroll direction: </div>

<script>
  let lastScrollTop = 0;
  const indicator = document.getElementById('indicator');

  window.addEventListener('scroll', () => {
    let scrollTop = window.pageYOffset || document.documentElement.scrollTop;
    if (scrollTop > lastScrollTop) {
      indicator.textContent = 'Scroll direction: down';
    } else {
      indicator.textContent = 'Scroll direction: up';
    }
    lastScrollTop = scrollTop <= 0 ? 0 : scrollTop; // Для Safari
  }, false);
</script>

</body>
</html>

В этом коде:

Определяется переменная lastScrollTop, которая будет хранить значение последней позиции прокрутки.
Вешается обработчик события scroll на окно (window). В этом обработчике определяется текущая позиция прокрутки с помощью window.pageYOffset или document.documentElement.scrollTop.
Сравнивается текущая позиция прокрутки с последней сохраненной. Если текущая позиция больше, значит пользователь скроллит вниз, иначе - вверх.
Обновляется значение lastScrollTop текущей позицией прокрутки.
Добавлена проверка <= 0 для совместимости с Safari.
Эта реализация работает для вертикальной прокрутки страницы, и показывает направление скролла в фиксированном блоке на странице.

или при помощи библиотеки lenis:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Scroll Direction with Lenis</title>
  <style>
    body {
      height: 2000px; /* Чтобы было что скролить */
      margin: 0;
    }
    .indicator {
      position: fixed;
      top: 10px;
      left: 10px;
      padding: 10px;
      background: rgba(0, 0, 0, 0.7);
      color: white;
      font-size: 18px;
      z-index: 1000;
    }
  </style>
</head>
<body>

<div class="indicator" id="indicator">Scroll direction: </div>

<script src="https://cdn.jsdelivr.net/npm/@studio-freight/lenis"></script>
<script>
  const lenis = new Lenis({
    duration: 1.2,
    easing: (t) => Math.min(1, 1.001 - Math.pow(2, -10 * t)), // default easing function
    smoothWheel: true,
    smoothTouch: false,
  });

  function raf(time) {
    lenis.raf(time);
    requestAnimationFrame(raf);
  }

  requestAnimationFrame(raf);

  const indicator = document.getElementById('indicator');

  lenis.on('scroll', (e) => {
    if (e.velocity > 0) {
      indicator.textContent = 'Scroll direction: down';
    } else {
      indicator.textContent = 'Scroll direction: up';
    }
  });
</script>

</body>
</html>

БЛОГ НА HUSL

Слушатель onscroll, направление

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