为什么我的 onscroll 函数在元素完全滚动之前停止？

如何解决为什么我的 onscroll 函数在元素完全滚动之前停止？

我编写了一个函数，可以在垂直滚动页面的中间将 div 水平滑动到视口中，并且大部分情况下都能正常工作。但是，当您快速滚动页面时，它会滑动，并且并不总是水平滚动完成。如果您快速滚动，它有时会停在浏览器的最左侧边缘，我有点不知所措，无法解释为什么会这样。

有吃货吗？ Codepen 在这里：https://codepen.io/ThatWerewolfTho/pen/xxRZERv

HTML

let value

// undefined
console.log((value ?? null) !== null)

// null
value = null
console.log((value ?? null) !== null)

// ''
value = ''
console.log((value ?? null) !== null)

// 0
value = 0
console.log((value ?? null) !== null)

// []
value = []
console.log((value ?? null) !== null)

CSS


    <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>

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;
}

解决方法

当滚动超过 100% 时，if 失败并且不会一直移动它。添加 else if 以在百分比滚动 >= 100

时捕获它

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