On Scroll Text - 当页面重新加载时导致大的转变（跳跃）

Question

我正在尝试创建滚动页面时移动的选取框文本，目前我正在获得该功能，但是例如，如果我在某个位置重新加载页面，文本会移动（跳跃）太多一个不太理想的效果。 这是代码笔链接：https://codepen.io/endritibra-the-flexboxer/pen/xxyZJbb 这是代码：

<div class="marqueeContainer">

  <div class="marqueeText">
    <h1>Endrit</h1>
    <h1>As</h1>
  </div>
  <div class="marqueeText">
    <h1>Artan</h1>
  </div>
  
  
</div>

<div class="container">
  <h2>Hahahahahah</h2>
  <h2>Hahahahahah</h2>  
<h2>Hahahahahah</h2>  
<h2>Hahahahahah</h2> 
 <h2>Hahahahahah</h2>
  <h2>Hahahahahah</h2> 
 <h2>Hahahahahah</h2>
  <h2>Hahahahahah</h2> 
 <h2>Hahahahahah</h2>
  <h2>Hahahahahah</h2>
  <h2>Hahahahahah</h2>
</div>
<div class="marqueeContainer">
  <div class="marqueeText">
    <h1>Endrit</h1>
    <h1>As</h1>
  </div>
  <div class="marqueeText">
    <h1>Artan</h1>
  </div>
  
  
</div>

.marqueeContainer{
  display:inline-flex;
  width:100%;
  overflow:hidden;
}

.marqueeText{
  min-width:100%;
  display:inline-flex;
}

.marqueeText *{
  margin:0 1rem;
}

const marqueeContainer=document.querySelectorAll(".marqueeContainer");
const marqueeText=document.querySelectorAll(".marqueeText");

document.addEventListener('scroll',()=>{

marqueeContainer.forEach((item)=>{
  
  
              window.requestAnimationFrame(() => {

  
  function animate(itm,calcSpeed){
                    itm.style.transform = `translateX(${calcSpeed}px)`;

  }
  let itemsrc=item.getBoundingClientRect().y;
                console.log(itemsrc)
  marqueeText.forEach((itms)=>{
      animate(itms,itemsrc)

  })
  
})
})
  
})

功能就在那里，我的意思是当我用鼠标滚动时文本会移动但是如果我想重新加载页面并且我在页面上的某个位置如果然后我滚动文本跳跃很多，效果不好。``