Прокручивание страницы по блокам

В общем, есть идея создать сайт, состоящий из нескольких блоков высотой во всю ширину экрана. И чтобы прокрутка страницы была от одного блока к другому. Если мы, условно, в начале страницы и хотим проскролить вниз, то страница автоматически перейдёт к следующему блоку. Вверх по тому же принципу. Много разных вариантов перепробовал, в частности: использовал массив с контейнерами, к которым нужно прокрутить, а также отслеживал нынешний элемент в связке с scrollIntoView; использовал IntersectionObserver (chatGPT посоветовал). В общем, все варианты были рабочими, НО лишь в firefox :) Как бы я не старался, но не получается заставить всё это работать в chrome, vivaldi и, наверняка, в других браузерах. Только в firefox. В чём может быть причина? Куда копать? Вот последний из реализованных вариантов: (в firefox работает, а в хроме медленно скролит либо вверх, либо вниз. по пикселю)

const containerElements = document.querySelectorAll(".container__element");
let prevScrollPos = window.pageYOffset;
let currentElement = 0;

document.addEventListener('scroll', scrollListener); 

function scrollListener(e) {
  let currentScrollPos = window.pageYOffset;
  const direction = currentScrollPos > prevScrollPos ? "down" : "up";
  console.log(direction);
  if (direction == 'down') {
    if (currentElement + 1 < containerElements.length) {
      currentElement++;
    }
  }
  else {
    if (currentElement - 1 >= 0) {
      currentElement--;
    }
  }
  let elementHeight = getAbsoluteHeight(containerElements[currentElement]);
  console.log(currentElement, elementHeight);
  
  let absolutePositionOnPage = elementHeight * currentElement;
  window.scrollTo({
    top: absolutePositionOnPage,
    behavior: "smooth"
});
  prevScrollPos = currentScrollPos;
}

function getAbsoluteHeight(el) {
   if (!el) {
     return 0;
   }
   let styles = window.getComputedStyle(el);
   let margin = parseFloat(styles['marginTop']) + 
                parseFloat(styles['marginBottom']);
   return Math.ceil(el.offsetHeight + margin);
 }

Ответы (0 шт):