О проблеме с анимацией прокрутки на маленьких экранах с использованием Vanilla JS

Question

Я создал анимацию для своего веб-сайта, чтобы изменить определенный элемент (например, цвет фона) при прокрутке с использованием Vanilla JS. Для этого я использовалwindow.onscroll свойство, и я запускаю анимацию, когда window.scrollY достигает определенной позиции, мой код:

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

Когда я редактирую на большом разрешении экрана, это выглядит великолепно, но если я смотрю страницу на своем ноутбуке, анимация искажается, потому что innerWidth а также innerHeightэкрана разные. Я хочу запускать анимацию динамически, если она достигает определенного раздела страницы, не беспокоясь о позиции прокрутки.

Есть ли у кого-нибудь идеи, как я могу это исправить?

Answer 1

Я думаю, используя getBoundingClientRect()решает вашу проблему. Вы в основном делаете что-то вроде этого:

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

В rect переменная теперь содержит объект, который включает top и left свойство со значениями, относящимися к области просмотра.

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