如何將滾動速度更改為平滑？

Question

我偶然發現了這個網站，我喜歡它的滾動功能。

https://drhyman.com/get-started/

我注意到卷軸非常平滑，而且沒有跳躍，給人一種平靜的感覺。 它以相同的平滑滾動響應我的鼠標滾輪、箭頭按鈕和空格鍵。 此外，較大顯示器上的側邊菜單有一個可愛的平滑滾動慣性曲線來錨定鏈接，我假設這是相關的。

我嘗試深入研究代碼，我很確定它不是 CSS 屬性，並且在 JS 文件中的“滾動”和“視差”上執行 control-F 顯示結果，但是有很多參考我不確定是哪一個控制此功能或如何在我自己的項目中復制它。 我知道他正在使用源文件中的 Wordpress 和 Jquery 。 毫無疑問，它是某種插件，通過對 StackOverflow 的一些挖掘，我發現了“Jquery Smooth Scroll”（ https://github.com/nathco/jQuery.scrollSpeed ）。 然而，他們的演示站點（ https://code.nath.co/scrollSpeed ）非常不穩定，而且一點也不流暢。 我還發現了這個演示（ http://jsfiddle.net/36dp03ur/ ）

 if (window.addEventListener) window.addEventListener('DOMMouseScroll', wheel, false); window.onmousewheel = document.onmousewheel = wheel; function wheel(event) { var delta = 0; if (event.wheelDelta) delta = event.wheelDelta / 120; else if (event.detail) delta = -event.detail / 3; handle(delta); if (event.preventDefault) event.preventDefault(); event.returnValue = false; } function handle(delta) { var time = 1000; var distance = 300; $('html, body').stop().animate({ scrollTop: $(window).scrollTop() - (distance * delta) }, time ); }

 #myDiv { height:2000px; width:100px; background-color: #CCF; font-family: 'Trebuchet MS'; font-size: 12px; line-height: 24px; padding: 5px; margin: 5px; overflow:hidden; }.boldit{font-weight:bold;}

 <div id="myDiv"> Use the mouse wheel (not the scroll bar) to scroll this DIV. You will see that the scroll eventually slows down, and then stops. <span class="boldit">Use the mouse wheel (not the scroll bar) to scroll this DIV. You will see that the scroll eventually slows down, and then stops. </span> Use the mouse wheel (not the scroll bar) to scroll this DIV. You will see that the scroll eventually slows down, and then stops. <span class="boldit">Use the mouse wheel (not the scroll bar) to scroll this DIV. You will see that the scroll eventually slows down, and then stops. </span> Use the mouse wheel (not the scroll bar) to scroll this DIV. You will see that the scroll eventually slows down, and then stops. <span class="boldit">Use the mouse wheel (not the scroll bar) to scroll this DIV. You will see that the scroll eventually slows down, and then stops. </span> Use the mouse wheel (not the scroll bar) to scroll this DIV. You will see that the scroll eventually slows down, and then stops. <span class="boldit">Use the mouse wheel (not the scroll bar) to scroll this DIV. You will see that the scroll eventually slows down, and then stops. </span> Use the mouse wheel (not the scroll bar) to scroll this DIV. You will see that the scroll eventually slows down, and then stops. <span class="boldit">Use the mouse wheel (not the scroll bar) to scroll this DIV. You will see that the scroll eventually slows down, and then stops. </span> Use the mouse wheel (not the scroll bar) to scroll this DIV. You will see that the scroll eventually slows down, and then stops. <span class="boldit">Use the mouse wheel (not the scroll bar) to scroll this DIV. You will see that the scroll eventually slows down, and then stops. </span> Use the mouse wheel (not the scroll bar) to scroll this DIV. You will see that the scroll eventually slows down, and then stops. <span class="boldit">Use the mouse wheel (not the scroll bar) to scroll this DIV. You will see that the scroll eventually slows down, and then stops. </span> Use the mouse wheel (not the scroll bar) to scroll this DIV. You will see that the scroll eventually slows down, and then stops. <span class="boldit">Use the mouse wheel (not the scroll bar) to scroll this DIV. You will see that the scroll eventually slows down, and then stops. </span> </div> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

但它也很跳躍，不響應箭頭或空格鍵。 所有這些瀏覽都是在 Windows 10 上的 Chrome v83.0.4103.61 中完成的。

我希望有更多經驗的人可以在他的網站上指出使這項工作正常進行的代碼，並指導我如何在自己的項目中復制它。

Answer 1

該站點似乎正在使用 wordpress 特定庫來實現其滾動行為。 在 chrome 中，您可以通過轉到開發人員工具中的源代碼並查看全局偵聽器下的輪子事件來找到特定代碼。

該站點正在偵聽的事件列表位於屏幕截圖的右側。 打開輪顯示滾輪的偵聽器。 單擊源將打開相應的 js 文件。 它已被縮小，但 chrome 應該可以為您提供漂亮的打印。 如果沒有，屏幕右下角有一個 {} 按鈕，可以很好地打印。

Answer 2

看起來該網站正在使用SmoothScroll 為網站JavaScript 庫使用以下初始化參數：

SmoothScroll({
    frameRate: 150,
    animationTime: 1000,
    stepSize: 100,
    pulseAlgorithm: 1,
    pulseScale: 4,
    pulseNormalize: 1,
    accelerationDelta: 50,
    accelerationMax: 3,
    keyboardSupport: 1,
    arrowScroll: 50,
    fixedBackground: 0
});

該庫與 WordPress 無關（除非它被該站點的某些 WordPress 插件使用），您可以在任何站點使用它，而不管其后端引擎如何。