用于在Firefox中平滑滚动的慢滚动的Javascript解决方法

Question

我是一个Web应用程序的开发人员.在这个应用程序中,有一个特定场景,其中有多个位置:固定元素,画布和溢出:滚动元素.在这种情况下,启用平滑滚动时,在Firefox上滚动速度非常慢.

从用户的角度来看,解决方案只是禁用平滑滚动.但是,作为开发人员,我无法确保用户已完成此操作.

有什么地方我可以告诉firefox不要使用javascript(或html)为我的网站平滑滚动？或者还有其他已知的解决方法吗？

Answer 1

我确实理解您的问题基本上是如何禁用平滑滚动。不过，为了让这个工作正常进行，我会以不同的方式回答你。

\n

为什么不同？

\n

即使您可以检测到用户的平滑滚动，您也不能强迫用户禁用它。换句话说，你试图掩盖问题而不是解决问题。所以让我们解决它！

\n

简介：像素到屏幕管道

\n

在每个帧上，浏览器都会执行以下步骤以在屏幕上呈现页面。

\n

\n

\n

• JavaScript。通常，JavaScript 用于处理会导致视觉变化的工作，无论是\xe2\x80\x99s jQuery\xe2\x80\x99s 动画函数、对数据集进行排序还是向页面添加 DOM 元素。不过，它不一定是 JavaScript 来触发视觉变化：CSS 动画、过渡和 Web 动画 API 也很常用。

  \n
\n

• 风格计算。这是根据匹配选择器（例如 .headline 或 .nav > .nav__item）确定哪些 CSS 规则适用于哪些元素的过程。从那里开始，一旦知道规则，就会应用它们并计算每个元素的最终样式。

  \n
\n

• 布局。一旦浏览器知道哪些规则适用于某个元素，它就可以开始计算它占用了多少空间以及它在屏幕上的位置。web\xe2\x80\x99s 布局模型意味着一个元素可以影响其他元素，例如元素的宽度通常会影响其子元素\xe2\x80\x99s 宽度，依此类推，一直到树的上下，因此该过程对于浏览器来说可能会非常复杂。

  \n
\n

• 画。绘画是填充像素的过程。它涉及绘制文本、颜色、图像、边框和阴影，基本上是元素的每个视觉部分。绘图通常在多个表面上完成，通常称为图层。

  \n
\n

• 合成。由于页面的各个部分可能被绘制到多个层中，因此需要以正确的顺序将它们绘制到屏幕上，以便页面正确呈现。这对于与另一个元素重叠的元素尤其重要，因为错误可能会导致一个元素错误地出现在另一个元素的顶部。

  \n
\n

\n

详细信息和来源： https: //developers.google.com/web/fundamentals/performance/rendering/ ?hl=en

\n

步骤1：

\n

第一步是删除渲染成本高昂的 CSS 属性。您可能无法删除很多，但是您可以替换rgba(255,255,255,1);为#fff删除 alpha 层。

\n

检查此以获取更多详细信息：https://csstriggers.com/ \n某些属性不需要执行 alayout或 apaint并且比其他属性轻。

\n

第2步：

\n

检查forced synchronous layout触发器。当您强制浏览器在 javascript 步骤中执行一段layout时间，然后返回到 javascript，而不是沿着每个帧上的管道平稳行走时，就会发生这种情况。为此，请避免获取布局属性并随后在循环中直接设置它们。

\n

以下是导致同步布局的原因列表：https://gist.github.com/paulirish/5d52fb081b3570c81e3a

\n

了解更多： https: //developers.google.com/web/tools/chrome-devtools/profile/rendering-tools/forced-synchronous-layouts?hl= en

\n

步骤3：

\n

将页面上需要定期重新绘制的组件移动到新图层中。

\n

每次滚动或播放动画时，浏览器都需要重新绘制。为了避免整个页面重新绘制并仅重新绘制正在更改的部分，请将该部分（例如视差、导航、动画）移动到浏览器上的新图层（将其想象为 Photoshop 图层）

\n

为此，请使用will-changecss 属性告诉浏览器将其移动到新层，transform: translateZ(0);如果您想强制浏览器移动它，请使用 css 属性。

\n