Javascript 为什么我的onscroll函数在元素完全滚动之前停止？ 我写了一个函数，在垂直滚动页面的中间水平地将div滑动到视口中，它主要工作。但是，当您快速滚动页面时，它会滑动，并且并不总是水平滚动完成。如果滚动速度很快，它有时会在浏览器最左边的边缘附近停止，我有点不明白为什么会这样

有人要吗？代码笔在这里：

HTML

    <div class="wrapper">
      <section id="section1" class="full-screen">
        <div class="container">
          <div class="container-inner">
            <h1>This is a very complicated case Maude. You know, a lotta ins, a lotta outs, lotta what-have-yous. There's a lot of strands to keep in my head, man.</h1>
          </div>
        </div>
      </section>
    
      <section id="section2" class="full-screen side-scroll">
        <div class="container">
          <div class="container-inner">
            <h1>I am not Mr. Lebowski. You're Mr. Lebowski. I’m the Dude! So that’s what you call me. That or, uh His Dudeness, or uh Duder, or El Duderino, if you’re not into the whole brevity thing.</h1>
          </div>
        </div>
      </section>
    
      <section id="section3" class="full-screen">
        <div class="container">
          <div class="container-inner">
            <h1>Saturday, Donny, is Shabbos, the Jewish day of rest. That means I don't work. I don't drive a car. I don't fuckin' ride in a car. I don't handle money. I don't turn on the oven and I sure as shit don't fuckin' roll!</h1>
          </div>
         <div>
      </section>
    </div>

JS

body {
  box-sizing: border-box;
  color: #fff;
  margin: 0;
}

.full-screen {
  text-align: center;
}

.container {
  height: 100vh;
  position: relative;
  width: 100vw;
}

.container-inner {
  left: 0;
  margin: 0;
  padding:0 2rem;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

#section1 {
  position: fixed;
}

#section1 .container {
  background-color: #bd1a54;
}

#section2 .container {
  background-color: #c9bfec;
  left: 100%;
  position: fixed;
  top: 0;
  translate: transformY(-50%);
}

#section3 .container {
  background-color: #35b761;
}

const sideScroll = () => {
  const docWidth = document.body.clientWidth
  const target = document.getElementById('section2')
  const targetChild = target.querySelector('.container')
  
  // Set the horizontal div height to give the illusion of stasis
  target.style.height = `${docWidth}px`
  targetChild.style.left = `${docWidth}px`
  
  const scrollThis = () => {
    // Find the top of the horizontal scrolling div container
    let targetRect = target.getBoundingClientRect()

    // Compare it against the bottom of the window
    // If it's in the viewport, tell the horizontal div that it's cool to come in
    const windowBottom = window.innerHeight
  
    let output = false
    if (targetRect.top < window.innerHeight) {
      output = true
    }

    return output
  }
  
  window.onscroll = scrollThis

  const setHorizontalPosition = () => {
    const targetRect = target.getBoundingClientRect()
    const howMuchScrolled = targetRect.height - targetRect.bottom
    const percentageScrolled = (howMuchScrolled / (targetRect.height - window.innerHeight)) * 100

    if (scrollThis() === true && percentageScrolled <= 100) {      
      targetChild.style.left = `${100 - percentageScrolled}%`
    }
  }
  
window.onscroll = setHorizontalPosition
}

window.onload = sideScroll```

const sideScroll=（）=>{
const docWidth=document.body.clientWidth
const target=document.getElementById（'section2'）
const targetChild=target.querySelector（“.container”）
//设置水平div高度以产生静止的错觉
target.style.height=`${docWidth}px`
targetChild.style.left=`${docWidth}px`
常量scrollThis=（）=>{
//找到水平滚动div容器的顶部
让targetRect=target.getBoundingClientRect（）
//将其与窗口底部进行比较
//如果它在视口中，告诉水平div进来很酷
const windowBottom=window.innerHeight
让输出=假
if（targetRect.top{
const targetRect=target.getBoundingClientRect（）
const howMuchScrolled=targetect.height-targetect.bottom
const percentageScrolled=（howMuchScrolled/（targetect.height-window.innerHeight））*100
如果（scrollThis（）===true&&percentageScrolled当滚动超过100%时，如果失败，并且不会一直移动它。添加一个else if以在滚动百分比>=100时捕获它

    else if (scrollThis() === true && percentageScrolled >= 100) {      
      targetChild.style.left = 0
    }