如何使用 Javascript 检测滚动超过页面开头？

Question

I have a navigation bar at the top of a HTML page that, when the client attempts to scroll past the top, should expand (using CSS and Javascript; I don't want it to be actually scrollable since I wanna give it an animation). The Javascript I was using to try to detect this is:

window.addEventListener('scroll', function(e) {
    // do whatever to confirm the page is scrolling
});

and while this works for regularly scrolling, it doesn't detect when the client tries to scroll past the boundaries of the page. I've also tried using if (window.scrollY <= 0) , but it goes off any time the client is at the top of the page (and doesn't detect whether the client is staying at the top or trying to scroll past it).

Is there a way I can detect scrolling past the top of the page using Javascript, preferably without messing with the formatting too much?

Answer 1

You can use 'wheel' event instead of the 'scroll' event.

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

addEventListener('scroll', ...)

Answer 2

does this work for you?

 window.addEventListener('scroll', function(e) { console.log(window.scrollY); if (window.scrollY <= 0) { alert('TOP'); } });

 test<br> test<br>test<br> test<br> test<br> test<br>test<br> test<br> test<br> test<br>test<br> test<br>test<br> test<br> test<br> test<br>test<br> test<br> test<br> test<br>test<br> test<br>test<br> test<br> test<br> test<br>test<br> test<br> test<br> test<br>test<br> test<br>test<br> test<br> test<br> test<br>test<br> test<br> test<br> test<br>test<br> test<br>test<br> test<br> test<br> test<br>test<br> test<br> test<br> test<br>test<br> test<br>test<br> test<br> test<br> test<br>test<br> test<br> test<br> test<br>test<br> test<br>test<br> test<br> test<br> test<br>test<br> test<br> test<br> test<br>test<br> test<br>test<br> test<br> test<br> test<br>test<br> test<br> test<br> test<br>test<br> test<br>test<br> test<br> test<br> test<br>test<br> test<br> test<br> test<br>test<br> test<br>test<br> test<br> test<br> test<br>test<br> test<br> test<br> test<br>test<br> test<br>test<br> test<br> test<br> test<br>test<br> test<br> test<br> test<br>test<br> test<br>test<br> test<br> test<br> test<br>test<br> test<br> test<br> test<br>test<br> test<br>test<br> test<br> test<br> test<br>test<br> test<br> test<br> test<br>test<br> test<br>test<br> test<br> test<br> test<br>test<br> test<br> test<br> test<br>test<br> test<br>test<br> test<br> test<br> test<br>test<br> test<br> test<br> test<br>test<br> test<br>test<br> test<br> test<br> test<br>test<br> test<br> test<br> test<br>test<br> test<br>test<br> test<br> test<br> test<br>test<br> test<br> test<br> test<br>test<br> test<br>test<br> test<br> test<br> test<br>test<br> test<br> test<br> test<br>test<br> test<br>test<br> test<br> test<br> test<br>test<br> test<br> test<br> test<br>test<br> test<br>test<br> test<br> test<br> test<br>test<br> test<br> test<br> test<br>test<br> test<br>test<br> test<br> test<br> test<br>test<br> test<br> test<br> test<br>test<br> test<br>test<br> test<br> test<br> test<br>test<br> test<br> test<br> test<br>test<br> test<br>test<br> test<br> test<br> test<br>test<br> test<br> test<br> test<br>test<br> test<br>test<br> test<br> test<br> test<br>test<br> test<br> test<br> test<br>test<br> test<br>test<br> test<br> test<br> test<br>test<br> test<br> test<br> test<br>test<br> test<br>test<br> test<br> test<br> test<br>test<br> test<br> test<br> test<br>test<br> test<br>test<br> test<br> test<br> test<br>test<br> test<br> test<br> test<br>test<br> test<br>test<br> test<br> test<br> test<br>test<br> test<br> test<br> test<br>test<br> test<br>test<br> test<br> test<br> test<br>test<br> test<br> test<br> test<br>test<br> test<br>test<br> test<br> test<br> test<br>test<br> test<br> test<br> test<br>test<br> test<br>test<br> test<br> test<br> test<br>test<br> test<br> test<br> test<br>test<br> test<br>test<br> test<br> test<br> test<br>test<br> test<br> test<br> test<br>test<br> test<br>test<br> test<br> test<br> test<br>test<br> test<br> test<br> test<br>test<br> test<br>test<br> test<br> test<br> test<br>test<br> test<br> test<br> test<br>test<br> test<br>test<br> test<br> test<br> test<br>test<br> test<br> test<br> test<br>test<br> test<br>test<br> test<br> test<br> test<br>test<br> test<br> test<br> test<br>test<br> test<br>test<br> test<br> test<br> test<br>test<br> test<br> test<br> test<br>test<br> test<br>test<br> test<br> test<br> test<br>test<br> test<br> test<br> test<br>test<br> test<br>test<br> test<br> test<br> test<br>test<br> test<br> test<br> test<br>test<br> test<br>test<br> test<br> test<br> test<br>test<br> test<br> test<br> test<br>test<br> test<br>test<br> test<br> test<br> test<br>test<br> test<br> test<br> test<br>test<br> test<br>test<br> test<br> test<br> test<br>test<br> test<br> test<br> test<br>test<br> test<br>test<br> test<br> test<br> test<br>test<br> test<br> test<br> test<br>test<br> test<br>test<br> test<br> test<br> test<br>test<br> test<br> test<br> test<br>test<br> test<br>test<br> test<br> test<br> test<br>test<br> test<br> test<br> test<br>test<br> test<br>test<br> test<br> test<br> test<br>test<br> test<br> test<br> test<br>test<br> test<br>test<br> test<br> test<br> test<br>test<br> test<br> test<br> test<br>test<br> test<br>test<br> test<br> test<br> test<br>test<br> test<br> test<br> test<br>test<br> test<br>test<br> test<br> test<br> test<br>test<br> test<br> test<br> test<br>test<br> test<br>test<br> test<br> test<br> test<br>test<br> test<br> test<br> test<br>test<br> test<br>test<br> test<br> test<br> test<br>test<br> test<br> test<br> test<br>test<br> test<br>test<br> test<br> test<br> test<br>test<br> test<br> test<br> test<br>test<br> test<br>test<br> test<br> test<br> test<br>test<br> test<br> test<br> test<br>test<br> test<br>test<br> test<br> test<br> test<br>test<br> test<br> test<br> test<br>test<br> test<br>test<br> test<br> test<br> test<br>test<br> test<br> test<br> test<br>test<br> test<br>test<br> test<br> test<br> test<br> test<br> test<br> test<br> test<br>