How to detect the top of a page using IntersectionObserver?

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
  <div id="page-top"></div>
  <!-- ... rest of content ... -->
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


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

function throttle(fn, wait) {
	var time =;
  	return function(e) {      
		if ((time + wait - < 0) {
			time =;

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');
		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.