javascript - 平滑页面滚动无限requestAnimationFrame

Question

我正在尝试实现平滑的页面滚动，因为我使用的是无限的 requestAnimationFrame，所以我觉得这个实现会影响性能，我的问题是我的植入是否有更好的解决方案？还是整个代码很糟糕，无法修复？

更新
我只是想实现整个页面平滑滚动而不是 anchor 链接

比如那些网站

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

更新

添加了键和滚动处理函数:

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

按 D 键向下滚动
按 U 键向上滚动
按住 D 或 U 键以继续滚动(对于 Chrome 来说不是那么多)
按 S 键将窗口绑定(bind)到滚轮事件*
按 X 键解除窗口与滚轮事件的绑定(bind)
* 当window绑定(bind)到wheel事件时，平滑滚动会自动向用户的方向滚动
滚动鼠标滚轮

这是一个简单的 CSS 属性:

:root {scroll-behavior: smooth;}

scroll-behavior: smooth

演示

注:以全页模式查看演示。

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>