Just as the title says. I want to run some code when the user scrolls to the top of the page, and some other code when the user scrolls down. I can’t seem to find anything about it on the web.
I could observe an empty div
at the top of the page and it does what I expect, but is it possible to do the same by observing the body instead?
Code that uses empty div
<body>
<div id="page-top"></div>
<!-- ... rest of content ... -->
</body>
const observer = new IntersectionObserver(function(entries) {
if (entries[0].intersectionRatio <= 0) {
// run some code when user scrolls away from the top
} else {
// run some code when user scrolls to the top
}
});
observer.observe(document.getElementById('page-top'));
If you’re trying to detect the top of the page, it might be more useful to add a scroll event listener to the window. That way, you needn’t add any special content to the html.
This snippet might help:
function scrollDetect() {
let scrollY = window.scrollY;
window.addEventListener('scroll',throttle(handleScroll,10));
function handleScroll(e) {
if(window.scrollY > scrollY) {
console.log('scrolling down');
} else if (window.scrollY < scrollY){
console.log('scrolling up');
}
if (window.scrollY === 0){
console.log('at top');
}
scrollY = window.scrollY;
}
}
// https://www.sitepoint.com/throttle-scroll-events/
function throttle(fn, wait) {
var time = Date.now();
return function(e) {
if ((time + wait - Date.now()) < 0) {
fn(e);
time = Date.now();
}
}
}
1 Like
Yes, you can listen for scrolltop changes on the body like this
// Initial state
var scrollPos = 0;
// adding scroll event
window.addEventListener('scroll', function(){
// detects new state and compares it with the new one
if ((document.body.getBoundingClientRect()).top > scrollPos)
document.getElementById('info-box').setAttribute('data-scroll-direction', 'UP');
else
document.getElementById('info-box').setAttribute('data-scroll-direction', 'DOWN');
// saves the new position for iteration.
scrollPos = (document.body.getBoundingClientRect()).top;
});
But this will trigger layout when calling getBoundingClientRect
. If you experience layout thrashing, you should look into listening for keydown
for pageUp/pageDown
and wheel
events.
https://javascript.info/onscroll