Question

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

Answer 1

如果您不想使用jQuery（您可能不会为非常简单的HTML页面执行此操作），则可以使用常规Javascript完成此操作：

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

window.onscroll = scrollFunction;
</script>

您提到在滚动向下页面时想要做某事 - onscroll事件会在x轴或y轴的任何方向上触发滚动，因此您的功能将是他们滚动的时候都会打电话。

如果你真的希望它只在向下滚动页面时运行代码，你需要保留前一个滚动位置，以便在调用onscroll时进行比较。

Answer 2

你不能只使用HTML，你需要使用Javascript。我建议使用jQuery，因此您的解决方案可能如下所示：

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

如果您不想或不能使用jQuery，可以使用Anthony发布的onscroll解决方案。

Answer 3

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

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

Answer 4

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

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

Answer 5

u可以简单地使用它

Shell "explorer.exe " & path, vbNormalFocus

Answer 6

要捕获鼠标滚轮事件，因为 mousewheel 事件是 Deprecated and Non-standard，您可以改用 wheel 事件。您可以阅读文档 here

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

Answer 7

这是我在纯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 8

这适合我。

SELECT *
FROM english
WHERE id NOT IN (SELECT english_id FROM netherland)

Answer 9

/**
 * 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 10

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

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 11

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

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

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;
});

捕获“向下滚动”事件？

12 个答案: