défilement fluide de la page à l'infini requestAnimationFrame

Question

J'essaie d'obtenir un défilement de page fluide mais j'ai l'impression que cette implémentation va affecter les performances puisque j'utilise infinity requestAnimationFrame, ma question est de savoir s'il y a une meilleure solution pour mon implémentation ? ou si tout le code est mauvais et ne peut pas être corrigé ?

mise à jour J'essaie simplement d'obtenir un défilement fluide de l'ensemble de la page et non un lien d'ancrage.

comme ces sites web par exemple

https://www.aristidebenoist.com/

http://www.thibaudallie.com/

const body = document.body,
    scrollWrap = document.getElementsByClassName("smooth-scroll-wrapper")[0],
    height = scrollWrap.getBoundingClientRect().height - 1,
    speed = 0.04;
var offset = 0;

body.style.height = Math.floor(height) + "px";

function smoothScroll() {

    offset += (window.pageYOffset - offset) * speed;
    var scroll = "translateY(-" + offset + "px) translateZ(0)";
    scrollWrap.style.transform = scroll;
    callScroll = requestAnimationFrame(smoothScroll);
}

smoothScroll();

html {
    overflow-x: hidden;
}

html, body {
    margin: 0;
    padding: 0;
    background: #161616;
    color: #fff;
    font-family: "Neue Machina";
}

body {
    overflow: hidden;
    width: 100%;
}

.smooth-scroll-wrapper {
    position: fixed;
    z-index: 2;
    top: 0;
    left: 0;
    overflow: hidden;
}

.content {
    font-size: 100px;
}

<div class="smooth-scroll-wrapper">
    <div class="content">
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam excepturi tenetur sapiente 
    dolor deleniti. Fuga labore pariatur esse. Repudiandae,voluptates nisi soluta architecto 
    inventore hic. Omnis eos expedita sed architecto illum mollitia! Totam aperiam 
    velconsequuntur a, ipsum sapiente sit laborum exercitationem distinctio labore praesentium 
    </div>
</div>

Answer 1

Mise à jour

Ajout d'une touche et de fonctions de gestion du défilement :

 window.addEventListener('keydown', smoothScroll);
 window.addEventListener('wheel', fastScroller, {passive: true});

Appuyer sur la touche D pour faire défiler vers le bas
Appuyer sur la touche U pour faire défiler vers le haut
Conserver soit D o U Appuyer sur la touche pour continuer le défilement (pas vraiment pour Chrome)
Appuyer sur la touche S pour lier la fenêtre à l'événement de la roue*
Appuyer sur la touche X pour délier la fenêtre de l'événement de la roue

* lorsque la fenêtre est liée à l'événement de la roue, le défilement progressif se fait automatiquement dans la direction vers laquelle l'utilisateur fait rouler la molette de la souris

---

Voici une propriété CSS simple :

:root {scroll-behavior: smooth;}

scroll-behavior: smooth

---

Démonstration

Remarque : Voir la démo en mode pleine page.

window.addEventListener('keydown', smoothScroll);

function smoothScroll(event) {
  let direction = event.key.toLowerCase() === 'd' ? 1000 : event.key.toLowerCase() === 'u' ? -1000 : 0;
  if (event.key.toLowerCase() === 's') {
    window.addEventListener('wheel', fastScroller, {passive: true});
  } else if (event.key.toLowerCase() === 'x') {
    setTimeout(function() {
      window.removeEventListener('wheel', fastScroller, {passive: true});
    }, 1000);
  }
  window.scrollBy({
    top: direction,
    left: 0,
    behavior: 'smooth'
  });
}

let prevST = 0;

function fastScroller(event) {
  const ST = window.scrollY;
  let direction = ST > prevST ? 3000 : -3000;
  prevST = ST;
  window.scrollBy({
    top: direction,
    left: 0,
    behavior: 'smooth'
  });
}

:root {scroll-behavior: smooth;}
section {text-align:center;height: 100vh;font-size:5rem;border:5px solid #000;}
section::before {content: attr(id);}
a {display:inline-block; font-size: 5rem; color: gold}
a::before {content: attr(href);}
#I {background: blue;}
#II {background: red;}
#III {background: grey;}
#IV {background: green;}
#V {background: black; color: white}
#VI a {color: black;}
#VII {background: chocolate;}
#VIII {background: yellow;}
#VIII a {color: black;}
#IX {background: purple; color: white;}
#X {background: maroon; color: white;}

<main>
  <section id='I'>
    <a href='#II'></a>
    <a class='bottom' href='#X'></a>
  </section>
  <section id='II'>
    <a href='#III'></a>
    <a href='#VI'></a>
  </section>
  <section id='III'>
    <a href='#IV'></a>
    <a href='#VIII'></a>
  </section>
  <section id='IV'>
    <a href='#V'></a>
    <a href='#VII'></a>
  </section>
  <section id='V'>
    <a href='#VI'></a>
    <a href='#I'></a>
  </section>
  <section id='VI'>
    <a href='#VII'></a>
    <a href='#X'></a>
  </section>
  <section id='VII'>
    <a href='#VIII'></a>
    <a href='#V'></a>
  </section>
  <section id='VIII'>
    <a href='#IX'></a>
    <a href='#IV'></a>
  </section>
  <section id='IX'>
    <a href='#X'></a>
    <a href='#VII'></a>
  </section>
  <section id='X'>
    <a class='top' href='#I'></a>
    <a href='#VI'></a>
  </section>
</main>