平滑頁面滾動無限requestAnimationFrame

Question

我正在嘗試實現平滑的頁面滾動，因為我使用的是無限的 requestAnimationFrame，所以我覺得這個實現會影響性能，我的問題是我的植入是否有更好的解決方案？ 還是整個代碼很糟糕，無法修復？

更新我只是想實現整個頁面平滑滾動而不是錨鏈接

比如那些網站

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鍵將 window 綁定到滾輪事件*
按X鍵解除 window 與車輪事件的綁定

*^{當window綁定滾輪事件時，平滑滾動會自動向用戶滾動鼠標滾輪的方向滾動}

---

這是一個簡單的 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>