javascript - 如何将滚动速度更改为平滑？

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

看起来该网站正在使用 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 插件使用)，您可以在任何站点使用它，无论其后端引擎如何。