Ошибка реализации эффекта цикла прокрутки и вращения div с помощью offsetTop

Question

Я сейчас работаю над сайтом с эффектом цикла прокрутки (когда вы достигаете нижней части страницы, он плавно переходит обратно наверх, создавая бесконечный цикл). Хотя у меня возникла проблема, пытаясь реализовать эффект поворота отдельных div'ов на основе их offsetTop.

Вот ссылка на скрипку с эффектом вращения, работающая без эффекта петли прокрутки-> https://jsfiddle.net/jacob_truax/bgrkewny/3/

Вот ссылка на скрипку с обоими эффектами -> https://jsfiddle.net/jacob_truax/b1x4dow7/18/

Как вы можете видеть во второй скрипке, добавление эффекта цикла прокрутки при реализации эффекта вращения нарушает код. Может кто-нибудь помочь мне разобраться, пожалуйста?

Вот js для сломанной скрипки

const sections = document.querySelectorAll("section")
const divTag = document.querySelector("div.Loop")
const mainTag = document.querySelector("main")

var doc = window.document,
  clones = divTag.querySelectorAll('.is-clone'),
  disableScroll = false,
  scrollHeight = 0,
  scrollPos = 0,
  clonesHeight = 0,
  i = 0;

const addMovement = function() {
  const topViewport = divTag.offsetTop
  const midViewport = topViewport + (divTag.offsetHeight / 2)

  sections.forEach(section => {
    const topSection = section.offsetTop
    const midSection = topSection + (section.offsetHeight / 2)

    const distanceToSection = (midViewport - midSection)
    console.log(distanceToSection)

    const image = section.querySelector(".info")

    image.style.transform = `rotate(${distanceToSection}deg)`
  })
}

addMovement()

function getScrollPos () {
  return (divTag.offsetTop || divTag.scrollTop) - (divTag.clientTop || 0);
}

function setScrollPos (pos) {
  divTag.scrollTop = pos;
}

function getClonesHeight () {
  clonesHeight = 0;

  for (i = 0; i < clones.length; i += 1) {
    clonesHeight = clonesHeight + clones[i].offsetHeight;
  }

  return clonesHeight;
}

function reCalc () {
  scrollPos = getScrollPos();
  scrollHeight = divTag.scrollHeight;
  clonesHeight = getClonesHeight();

  if (scrollPos <= 0) {
    setScrollPos(1); // Scroll 1 pixel to allow upwards scrolling
  }
}

function scrollUpdate () {
  if (!disableScroll) {
    scrollPos = getScrollPos();

    if (clonesHeight + scrollPos >= scrollHeight) {
      // Scroll to the top when you’ve reached the bottom
      setScrollPos(1); // Scroll down 1 pixel to allow upwards scrolling
      disableScroll = true;
    } else if (scrollPos <= 0) {
      // Scroll to the bottom when you reach the top
      setScrollPos(scrollHeight - clonesHeight);
      disableScroll = true;
    }
  }

  if (disableScroll) {
    // Disable scroll-jumping for a short time to avoid flickering
    window.setTimeout(function () {
      disableScroll = false;
    }, 40);
  }
}

function init () {
  reCalc();

  divTag.addEventListener('scroll', function () {
    window.requestAnimationFrame(scrollUpdate);
    addMovement()
  }, false);

  window.addEventListener('resize', function () {
    window.requestAnimationFrame(reCalc);
    addMovement()
  }, false);
}

if (document.readyState !== 'loading') {
  init()
} else {
  doc.addEventListener('DOMContentLoaded', init, false)
}

Вот css

html,
body {
  height: 100%;
  /* overflow: hidden; */
}

body {
  color: #000;
}

main {
  height: 100%;
  position: relative;
  top: 0;
  left: 0;
}

header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  text-align: center;
  z-index: 1;
}

.Loop {
  position: absolute;
  height: 100%;
  overflow: auto;
}

section {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  width: 100vw;
  height: 100vh;
}

::scrollbar {
  display: none;
}

section div {
  position: absolute;
  z-index: 2;
  text-align: center;
  width: 50%;
  background-color: #ff0000;
}

section img {
  position: relative;
  width: 50%;
  background-color: #000;
}

Answer 1

Свойство offsetTop возвращает верхнюю позицию (в пикселях) относительно верха элемента offsetParent.

Изменение строки # 14 для использования вместо нее scrollTop работает:

  const topViewport = divTag.scrollTop;