On scroll animation issue on small screens using Vanilla JS

Question

I’ve created an animation for my website to change a certain element (for example its background colour) while scrolling using Vanilla JS. For this I have used the window.onscroll property and I trigger the animation when window.scrollY reaches a specific position, my code is:

window.addEventListener('scroll', () => {
   if (window.scrollX >= 1000) {
      box.style = "background:red"
   }
})

It looks great when I am editing on my big screen resolution, but if I look at the page on my laptop, the animation gets messed up because the innerWidth and innerHeight of the screen are different. I want to trigger the animation dynamically if it reaches a certain section of the page without having to worry about the scroll position.

Does anyone have any ideas about how I can fix this?

Answer 1

I think using getBoundingClientRect() solves your problem. You basically do something like this:

var my_box = document.getElementById('my-box');
var rect = my_box.getBoundingClientRect();

The rect variable now contains an Object which includes a top and a left property with values that are relative to the viewport.

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