主页 / 问题 / 1603925
Accepted
Лена
Asked:2025-01-03 16:47:44 +0000 UTC2025-01-03 16:47:44 +0000 UTC

确定页面滚动的方向

  • 772
document.onscroll = e => {

    console.log(e);

};

如何找出用户将向哪个方向滚动页面？

相关问题：

任务是当用户滚动到底部时隐藏页面上的水平菜单，反之亦然。一旦用户开始向上滚动。开始逐步显示菜单，用户向下滚动 20px。因此，将水平菜单降低同样的 20 个像素...

它表明这样的问题只能通过样式来解决。也许从事过此工作的人知道这是什么。

html

1 个回答

  1. Best Answer

    为了确定滚动方向，您可以将滚动位置的当前值与之前的值进行比较。如果新值更大，则用户将向下滚动；如果少了-起来。

    这是一个示例实现：

    确定滚动方向：

    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;
}
    • 3

相关问题