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

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 插件使用），您可以在任何站点使用它，而不管其后端引擎如何。