Javascript 实现滚动循环效果和带偏移的旋转div的问题

我现在正在一个具有滚动循环效果的站点上工作（当你到达页面底部时，它会无缝地跳回到顶部，从而创建一个无休止的循环）。尽管我在尝试实现一种效果时遇到了一个问题，即根据每个div的偏移量来轮换它们

这是一个具有旋转效果的小提琴链接，没有滚动循环效果->

这里有一个链接，指向同时具有两种效果的小提琴->

正如您在第二部分中所看到的，在实现旋转效果的同时添加滚动循环效果会破坏代码。有人能帮我弄清楚吗

这是为坏小提琴的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)
}

offsetTop属性返回相对的顶部位置（以像素为单位） 到offsetParent元素的顶部

将第14行改为使用scrollTop：

  const topViewport = divTag.scrollTop;

---

谢谢我想是这么简单。你不会知道如何摆脱Hello 1 div上的小“故障”，当scollbar跳回顶部时，你会这样做吗？

  const topViewport = divTag.scrollTop;