Wyliczanie procentowej pozycji elementu

Question

Hej, mam problem, z którym poram się już dosyć sporo czasu, więc postanowiłem uderzyć do was, po 2 latach nieobecności. :P Bardziej pewnie logika podchodzi pod matematykę i pominięcie jakichś wartości, niż front-end, ale myślę, że dacie radę mi z tym w jakiś sposób pomóc. ;) Problem jest taki: mam sobie kontener, którego pozycję chciałbym wyliczyć w mniej więcej taki sposób:

• 0%, gdy dochodzimy do momentu scrolla, kiedy sam element jest jeszcze niewidoczny na ekranie, a jego scroll.
• 50%, gdy element na ekranie znajduje się na jego środku.
• 100%, gdy przescrollowany element z powrotem zaczyna być niewidoczny na ekranie.

 Wyliczam to obecnie w taki sposób, ale coś jest nie tak, bo podobnie jak na obrazku, przy 50% scrolla, żółte linie na obrazku nie są równe (a teoretycznie być powinny :P). Finalnie: pytanie brzmi - czy ktoś potrafi wskazać mi błąd w logice wyliczania tych procentów?

Answer 1

Użyj metody getBoundingClientRect do okreslenia pozycji względem okna widoku (viewport) i sprawdzaj czy znajduje się w oczekiwanym polu

<div id="box"></div>
<div id="percentage">start scroll</div>
<div class="vline"></div>

var element = document.getElementById('box');
 
var count = document.getElementById('percentage');
let rectObject;
const intViewportHeight = window.innerHeight;
 
 
let ticking = false;
 
function doSomething(scroll_pos) {
  if(scroll_pos.top.toFixed()>intViewportHeight){
    console.log('nie widać')
  }else if((scroll_pos.top + rectObject.height) < 0){
      console.log("wyjechało do góry")
  }else if(scroll_pos.top.toFixed()<intViewportHeight/2){
    console.log("mineło pół")
  }else if(scroll_pos.top.toFixed()<intViewportHeight){
      console.log("widać")
  }
  count.textContent = scroll_pos.top;
}
 
window.addEventListener('scroll', function(e) {
 
  if (!ticking) {
		rectObject = element.getBoundingClientRect();
    window.requestAnimationFrame(function() {
      doSomething(rectObject);
      ticking = false;
    });
 
    ticking = true;
  }
});

body{
	height: 1000vh;
}    
#percentage {
      position: fixed;
      top: 0;
      right: 0;
      border: 1px dashed;
    }

    #box {
      position: relative;
      top: 142vh;
      background-color: skyblue;
      height: 66vh;
    }

    .vline {
      position: fixed;
      top: 50%;
      width: 100%;
      height: 3px;
      background-color: red;
    }