如何在 CSS 中平滑滚动？答案

【问题标题】：How to make smooth scrolling in CSS?如何在 CSS 中平滑滚动？
【发布时间】：2021-11-30 08:26:13
【问题描述】：

我已经制作了一个简单的视差网站link，当我用鼠标滚动时，它只是粗糙的方式。另一方面，当您访问this website 时，您会注意到滚动非常流畅。

我怎样才能做到这一点？

我已经在 GitHub 上上传了source code of my website。

另外，我也尝试添加scroll-behaviour: smooth; 和transition。

谢谢

【问题讨论】：

我对此并不肯定，但我删除了您正在以另一种方式滚动的图像，它对我来说使文本平滑了很多。也许只是它一次做了太多的计算。我还会考虑从您的滚动变换中删除左侧的 50%。称之为预感，但我认为它使页面做的工作超出了应有的范围。

【解决方案1】：

尝试在您的 CSS 中将 scroll-behavior: smooth; 添加到 body。我在我的终端上进行了测试并为您的网站工作。

为了更流畅的滚动，可能会进一步压缩图像资源。它们很大。

旁注：请注意，视差效应可能对 SEO 非常不利。

对我来说，它看起来不错：https://jsfiddle.net/1pw8bu2v/

另一个注意事项：您可能没有在 Chrome 中启用平滑滚动。请检查chrome://flags/#smooth-scrolling，以防万一排除。

【讨论】：

不起作用 :( 另外，图像是 SVG，所以我认为我不能再压缩它们了
让我快速做一些测试
也许这不是问题，但并非所有浏览器都默认启用平滑滚动。如果您使用 Chrome，请尝试 chrome://flags/#smooth-scrolling
是的，它确实有所作为。现在你能告诉我如何为其他没有启用该设置的人进行这项工作吗？此外，它仍然太滞后，我该如何解决？
我也会尽量不使用 SVG，也许会选择高度压缩的 JPEG。我对此进行了测试，它在平滑度上有很大的不同。无论如何，你的代码对我来说非常顺利：jsfiddle.net/1pw8bu2v