重绘时间从0到8ms，Chrome仍然不能顺利滚动

Question

首先，让我解释一下我在这里所说的“平滑滚动”。当我通过一个“步骤”旋转鼠标滚轮时，例如在Google搜索结果页面上，页面会逐渐向上/向下移动 - 从“滚动前”状态到“滚动后”状态的过渡需要一段时间，并且动画很好。但是，无论何时我在html中创建一个长页面并尝试仅滚动一个“步骤”，滚动上就不会有动画或转换 - 页面只是立即向上或向下跳转几行。我的页面的平均重绘时间大约需要5毫秒，峰值高达8毫秒，所以我知道重绘时间不是原因。
我知道，这样的平滑滚动可以在没有任何脚本的情况下实现，例如，即使禁用了js，该网站的滚动效果也非常平滑。
为什么Chrome选择不平滑滚动我的页面？如何实现顺利滚动而不依赖于JS，就像CSS忍者管理的那样？

PS Firefox似乎没有这个问题。如何使用我的html/css来告诉Chrome浏览器，我希望我的页面能够顺利滚动？

Answer 1

我知道你不是在JS解决方案之后，但我从来没有看到任何可以保证JavaScript以外的地方，上面的karan的链接无疑是我见过的最流畅的例子。

（限制性条款：。我使用的是Chrome浏览器的Windows，而不是Linux显然，这可能有所作为）

我使用Chrome自己，我总是得到页跳跃滚动，而不是smoothly--即使是上面描述的“流畅”页面，我也一次只能看到几行内容，包括Google结果页。在Chrome中曾经有一个可用的标志，它允许你打开平滑滚动 - 它可以通过Chrome的标志访问（转到chrome：// flags /查看可用的标志） - 但现在是仅适用于Linux Chrome平台。它可能在未来再次可用，但至少现在不是。不过，希望这些实验性功能最终能够进入Chrome，并且使整个问题变得过时。

另一方面，无论我在哪个页面上，Firefox都会以很好的流畅步骤滚动 - 包括我自己的本地信息页面，几乎没有任何样式。 IE浏览器可以顺畅地滚动，尽管几乎不像Firefox那么好，而Opera的浏览器像Chrome一样，并且一次只浏览几行代码。

我敢肯定，这是一个与浏览器有关的问题，而不是您现在可以单独修改样式的问题。抱歉，我无法提供更多帮助，但如果您为客户做这件事，至少您可以解释问题。

Answer 2

您可以启用Chrome平滑滚动manually，这对网站开发没有意义。

或者你可以使用一些库来实现这一点。

https://github.com/fatlinesofcode/jquery.smoothwheel

可悲的是镀铬不能启用通过HTML，CSS和JS平滑滚动。

Answer 3

我强烈建议找到一个替代解决方案，但我设法找到了解决这个确切的问题，我的一个网站。类似于使用闪光胶来解决墙上的泄漏问题，我发现在页面上包含一个用于Google地图的iframe（即使它隐藏）也可以以平滑滚动的方式添加。我不知道它是如何工作的，但有一些奇怪的原因。

正如我所说，我强烈建议不要这样做，因为它在每个页面上提出一个额外的（有时是冗长的）请求来包含大多数用户永远不会看到的元素。