Определить в каком направлении скролица страница

Question

document.onscroll = e => {

    console.log(e);

};

Как узнать в каком направлении пользователь скролит страницу?

Сопутствующий вопрос:

Задача состоит в том, чтобы на странице, горизонтальное меню скрыть когда пользователь скролит в низ и наоборот. Как только пользователь начинает скролить вверх. Начать показывать меню пошагово, проскролил пользователь в низ на 20px. Значит на эти самые 20пикселей, опустить горизонтальное меню...

Что та подсказывает, что подобную задачу возможно решить исключительно за счет стилей. Быть может кто работал с этим, знает что к чему.

Answer 1

Для того чтобы определить направление скролла, можно сравнивать текущее значение позиции скролла с предыдущим значением. Если новое значение больше, значит пользователь скроллит вниз; если меньше — вверх.

Вот пример реализации:

Определение направления скролла:

let lastScrollPosition = 0; // Последняя зафиксированная позиция скролла

document.onscroll = () => {
    const currentScrollPosition = window.scrollY; // Текущая позиция по вертикали

    if (currentScrollPosition > lastScrollPosition) {
        console.log('Скролл вниз');
    } else {
        console.log('Скролл вверх');
    }

    lastScrollPosition = currentScrollPosition; // Обновляем позицию
};

Решение задачи с меню: Используем тот же принцип: отслеживаем направление скролла. Меняем позицию меню постепенно, основываясь на разнице между текущей и предыдущей позицией скролла. Пример реализации:

let lastScrollPosition = 0; // Последняя зафиксированная позиция скролла
let menuOffset = 0; // Смещение меню
const menu = document.querySelector('.menu'); // Ваше горизонтальное меню
const menuHeight = 50; // Высота меню (в пикселях)

document.onscroll = () => {
    const currentScrollPosition = window.scrollY; // Текущая позиция по вертикали
    const scrollDifference = currentScrollPosition - lastScrollPosition;

    if (scrollDifference > 0) {
        // Скролл вниз
        menuOffset = Math.min(menuOffset + scrollDifference, menuHeight); // Не больше высоты меню
    } else {
        // Скролл вверх
        menuOffset = Math.max(menuOffset + scrollDifference, 0); // Не меньше 0
    }

    menu.style.transform = `translateY(-${menuOffset}px)`; // Смещаем меню вверх или вниз
    lastScrollPosition = currentScrollPosition; // Обновляем позицию
};

CSS для меню

.menu {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 50px; /* Задайте высоту вашего меню */
    background-color: #333;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.1s linear; /* Плавный переход */
    z-index: 1000;
}

БЛОГ НА HUSL

Определить в каком направлении скролица страница

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