捕获“向下滚动”事件？

Question

我正在设计一个非常简单的网页（仅限 HTML），我想要实现的唯一“功能”是当用户向下滚动页面时执行某些操作，有没有办法以某种方式捕获该“事件”？

Answer 1

如果您不想使用 jQuery（对于非常简单的 HTML 页面可能不会这样做），您可以使用常规 Javascript 来完成此操作：

<script>
function scrollFunction() {
    // do your stuff here;
}

window.onscroll = scrollFunction;
</script>

您提到您想要在他们向下滚动页面时执行某些操作 - onscroll 事件会触发向任何方向（x 轴或 y 轴）的滚动，因此每次滚动时都会调用您的函数。

如果您确实希望它仅在向下滚动页面时运行您的代码，则需要保留之前的滚动位置，以便在调用 onscroll 时进行比较。

Answer 2

更好的方法是不仅检查滚动事件，还检查方向滚动，如下所示；

$(window).bind('mousewheel', function(event) {
if (event.originalEvent.wheelDelta >= 0) {
    console.log('Scroll up');
}
else {
    console.log('Scroll down');
}
});

Answer 3

为了完整起见，还有另一个使用另一个 JS 框架（Mootools）的解决方案

window.addEvent('scroll',function(e) {
    //do stuff
});

Answer 4

您无法仅使用 HTML 来完成此操作，您需要使用 Javascript。我建议使用 jQuery，所以你的解决方案可以如下所示：

$(document).ready(function() {
    $(window).scroll(function() {
      // do whatever you need here.
    });
});

如果您不想或无法使用 jQuery，您可以使用 Anthony 发布的

onscroll

解决方案。

Answer 5

您可以使用

wheel

事件来捕获鼠标滚轮事件，因为

mousewheel

事件是 已弃用 和 非标准。 您可以阅读有关轮子事件的更多信息这里

另外@plusz评论道：

不要将滚轮事件与滚动事件混淆

window.onwheel = e => {
  if(e.deltaY >= 0){
    // Wheel Down
    console.log('Down');
  } else {
    // Wheel Up
    console.log('Up');
  }
}

Answer 6

这是我用纯 JavaScript 编写的解决方案，请注意，唯一的问题是它被执行了很多次。抱歉，我使用谷歌翻译的拼写，我是法国人;)

var scrollBefore = 0;

window.addEventListener('scroll',function(e){
    const scrolled = window.scrollY;

    if(scrollBefore > scrolled){
        console.log("ScrollUP");
        scrollBefore = scrolled;
        //Desired action
    }else{
        scrollBefore = scrolled;
        console.log("ScrollDOWN");
        //Desired action
    }

})

Answer 7

你可以简单地使用这个

window.addEvent('scroll',function(e) {
    if (document.body.scrollTop > 50 || document.documentElement.scrollTop > 50) {
            // enter code here
        }
});

Answer 8

以上答案都是正确的。 这是普通的 Javascript 方法。

document.addEventListener("mousewheel", function(event){
  if(event.wheelDelta >= 0){
    console.log("up")
  }else{
    console.log("down")
  }
})

更新：

Deprecated

https://developer.mozilla.org/en-US/docs/Web/API/Element/mousewheel_event

Answer 9

这对我有用。

var previousPosition

$(window).scroll(function(){
  var currentScrollPosition=$(window).scrollTop() + $(window).height()
  if (currentScrollPosition>previousScrollPosition) {
    console.log('down')
  }else if(currentScrollPosition<previousScrollPosition){
    console.log('up')
  }
  previousScrollPosition=currentScrollPosition
});

Answer 10

/**
 * This function will determine if a client mousewheel is scrolling up or down.
 */
  //window.addEventListener("load", eScroll);

  function eScroll() {

      window.addEventListener('mousewheel', (event)=> {

        let originalEvent = event.wheelDeltaY;

        if (event.wheelDeltaY >= 0) {
            console.log('Scroll up');
        }
        else {
            console.log('Scroll down');
        }
    });
  }

  window.addEventListener("load", scrollDown);

  function scrollDown() {

      window.addEventListener('mousewheel', (event)=> {

     if (event.wheelDeltaY <= 0) {
        console.log(event.wheelDeltaY);
        console.log('Mousewheel has scrolled down');
      }
   })
  }

  window.addEventListener("load", scrollUp);

  function scrollUp() {

      window.addEventListener('mousewheel', (event)=> {

      if (event.wheelDeltaY > 0) {
        console.log(event.wheelDeltaY);
        console.log('Mousewheel has scrolled up');
      }
  })

  }

Answer 11

检查用户是否向上滚动并简单返回

window.addEventListener(
  "scroll",
  e => {
    const scrolled = window.scrollY; // Number of pixels the user has scrolled
    let lastScrolled = 0; // Number of pixels the user has scrolled in the last event

    // If the user scrolls down, the scrolled value goes up and vice versa
    // So basically
    if (scrolled < lastScrolled) {
      // Then the user scrolled up!
      console.log("GET OUT! YOU SCROLLED UP!");
      // But you should update the lastScrolled value nonetheless
      lastScrolled = scrolled;
      return; // And then get out!
    }
    lastScrolled = scrolled; // The value gets updated in any case
    // And your code goes here
  },
  false
);

Answer 12

此代码对我有用，我希望这对您有帮助

var scrollval = 0;
window.addEventListener('scroll', () => {
  if(scrollval > window.scrollY) {
    // Do something
    console.log('Scroll up')
  } else {
    // Do something
    console.log('Scroll down')
  }
  scrollval = window.scrollY;
});

Answer 13

关于此评论https://stackoverflow.com/a/63997400/9654048 此代码在每个方向上重复的次数不得超过一次 编辑值并使用它:)

const element = document.querySelector('nav');


element.style.lineHeight = '100px';
element.style.height = '100px';

// scroll tracking
let lastScrollY = window.scrollY;
let scrollingDown = false; // Tracking scroll down
let scrollingUp = false; //  Tracking scroll up


function handleMouseWheel(event) {
  const currentScrollY = window.scrollY;

  if (currentScrollY > lastScrollY && !scrollingDown && window.innerWidth > 991) {
    //Scroll down ( trigers only onece)
    scrollingDown = true;
    scrollingUp = false;

    element.style.lineHeight = '50px';
    element.style.height = '50px';
    //console.log("TEST down");
  } else if (currentScrollY < lastScrollY && !scrollingUp) {
    //Scroll up ( trigers only onece)
    scrollingUp = true;
    scrollingDown = false;

    element.style.lineHeight = '100px';
    element.style.height = '100px';
   //console.log("TEST up");
  }

  lastScrollY = currentScrollY;
}

// calling event
window.addEventListener('wheel', handleMouseWheel);