Indicateur de scroll

<style>
.bn-scroll-gauge-demo {
  padding: 2.5rem;
  font-family: 'Inter', sans-serif;
  background: #0B0F10;
}

.bn-scroll-gauge-demo__hint {
  max-width: 340px;
  color: #979793;
  font-size: 0.85rem;
  line-height: 1.6;
  margin: 0 0 2rem;
}

.bn-scroll-gauge {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.7rem;
  color: #979793;
}

.bn-scroll-gauge__track {
  position: relative;
  width: 3px;
  height: 120px;
  background: rgba(230, 228, 221, 0.12);
  border-radius: 999px;
}

.bn-scroll-gauge__fill {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 0%;
  background: #E6E4DD;
  border-radius: 999px;
  transition: height 0.1s linear;
}

.bn-scroll-gauge__value {
  font-weight: 600;
  color: #E6E4DD;
}

</style>

<div class="bn-scroll-gauge-demo" data-fx-root>
  <p class="bn-scroll-gauge-demo__hint">
    Scrollez cette page (le bloc de code plus bas donne de quoi faire) pour
    voir la jauge se remplir.
  </p>

  <div class="bn-scroll-gauge">
    <span class="bn-scroll-gauge__min">00</span>
    <div class="bn-scroll-gauge__track">
      <div class="bn-scroll-gauge__fill"></div>
    </div>
    <span class="bn-scroll-gauge__max">100</span>
    <span class="bn-scroll-gauge__value">0%</span>
  </div>
</div>


<script>
/* ==========================================================
   INDICATEUR DE SCROLL
   Même principe que le parallax et le fondu au scroll : on
   calcule le pourcentage de défilement de LA VRAIE PAGE (celle
   qui contient ce composant), pas de l'iframe qui l'affiche.
   ========================================================== */

(function () {
  const root = document.querySelector('.bn-scroll-gauge-demo[data-fx-root]');
  if (!root) return;

  const fill = root.querySelector('.bn-scroll-gauge__fill');
  const value = root.querySelector('.bn-scroll-gauge__value');

  const isInsideFrame = Boolean(window.frameElement);
  const scrollTarget = isInsideFrame ? window.parent : window;
  const doc = isInsideFrame ? window.parent.document.documentElement : document.documentElement;

  function update() {
    const scrollTop = isInsideFrame ? window.parent.scrollY : window.scrollY;
    const maxScroll = doc.scrollHeight - doc.clientHeight;
    const percent = maxScroll > 0 ? Math.min(100, Math.round((scrollTop / maxScroll) * 100)) : 0;

    fill.style.height = `${percent}%`;
    value.textContent = `${percent}%`;
  }

  scrollTarget.addEventListener('scroll', update, { passive: true });
  window.addEventListener('resize', update);
  update();
})();

</script>