在 Firefox 中使用平滑滚动进行慢速滚动的 Javascript 解决方法

Question

我是网络应用程序的开发人员。在这个应用程序中有一个特定的场景，其中有多个 position:fixed 元素、canvas 和一个 overflow:scroll 元素。在这种情况下，当启用平滑滚动时，Firefox 上的滚动速度非常慢。

从用户的 Angular 来看，解决方案就是禁用平滑滚动。但是，作为开发人员我不能确保用户已经这样做了。

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

Answer 1

我明白您的问题基本上是如何禁用平滑滚动。但是，为了使它正常工作，我会以不同的方式回答你。

为什么不同？

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

简介:像素到屏幕的管道

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

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

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

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

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

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

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

第 1 步:

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

查看更多详细信息:https://csstriggers.com/一些属性不需要进行layout 或paint，并且比其他属性更轻。

第 2 步:

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

这里列出了导致同步布局的原因:https://gist.github.com/paulirish/5d52fb081b3570c81e3a

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

第 3 步:

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

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

要做到这一点，请使用 will-change css 属性告诉浏览器将其移动到新层，并使用 transform: translateZ(0); 如果你想强制浏览器移动它。