javascript - Why does my onscroll function stop before the element is fully scrolled?

Question

I wrote a function to slide a div into the viewport horizontally in the middle of a vertically scrolling page and it mostly works. It slips when you scroll through the page quickly, though, and doesn't always finish scrolling in, horizontally. If you're scrolling fast, it sometimes stops short of the left-most edge of the browser and I'm at a bit of a loss to explain why that is.

Any takers? Codepen here: https://codepen.io/ThatWerewolfTho/pen/xxRZERv

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>

CSS

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

JS

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

question from:https://stackoverflow.com/questions/66057139/why-does-my-onscroll-function-stop-before-the-element-is-fully-scrolled

Answer 1

When the scroll goes over 100% the if fails and doesn't move it all the way. Add an else if to catch it when the percentageScrolled is >= 100

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