如何将滚动速度调整为更加流畅？

Question

我偶然发现了这个网站，我喜欢它的滚动特性。

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

我注意到滚动非常平滑，没有跳跃感，给人一种平静的感觉。它对我的鼠标滚轮、箭头按钮和空格键都有同样顺畅的反应。此外，大屏幕上的侧边菜单具有可爱的平滑滚动惯性曲线，以锚定链接，我认为这是相关的。

我试图深入了解代码，我相当确定它不是CSS属性，而在JS文件中搜索“scroll”和“parallax”，结果显示很多引用，我不确定哪个控制此功能或如何在自己的项目中复制它。我知道他在源文件中使用了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中完成。

我希望有更多经验的人能够指出他网站上的代码是如何运作，并指导我如何在自己的项目中复制这个。

- Jacob Haugen

Answer 1

看起来该网站使用了特定于wordpress的库来实现其滚动行为。在Chrome中，您可以通过进入开发者工具中的源代码并查看全局侦听器下的wheel事件来找到特定的代码。

该网站正在监听的事件列表显示在屏幕截图的右侧。打开wheel将显示滚轮的侦听器。单击源代码将打开相应的js文件。它已被压缩，但Chrome应该会提供漂亮的打印功能。如果没有，屏幕右下角有一个{}按钮可用于漂亮地打印输出。

- Charlie Bamford

Answer 2

看起来该网站正在使用SmoothScroll for websites 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插件使用），您可以在任何网站上使用它，而不受其后端引擎的限制。

- Ivan Shatsky