在firefox中实现缓慢滚动和平滑滚动的Javascript解决方案

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

从用户的角度来看，解决方案只是禁用平滑滚动。然而，作为一名开发人员，我不能确保用户已经做到了这一点

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

您尝试过添加吗

backface-visibility: hidden;

给你定位元素

我宁愿解决问题的根源。通常有一个小细节会造成一个巨大的瓶颈，并且很容易通过更改一行代码或其他内容来修复。请注意，你很可能根本不需要减少应用程序的“美貌”；这只是一个避免浏览器布局引擎的小而破坏性的性能细节的问题

---

我猜一下，你的web应用上有什么东西导致了非常大的重绘和/或频繁的回流。检查是否使用了

offsetTop

和

位置：fixed

。同样值得一看的是，使用

requestAnimationFrame

而不是为每个滚动事件更新

我知道你的问题基本上是如何禁用平滑滚动。不过，我将以不同的方式回答您，以使其正常工作

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

简介：像素到屏幕管线 在每个帧上，浏览器执行以下步骤在屏幕上呈现页面

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

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

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

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

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

详情及资料来源：

步骤1： 第一步是删除昂贵的css属性。您可能无法删除很多，但是可以替换

rgba（255255,1）#fff

删除alpha层

查看此项了解更多详细信息： 有些属性不需要进行

布局

或

绘制

，而且它们的重量比其他属性轻

步骤2： 检查

强制同步布局

触发器。当您在javascript步骤中强制浏览器执行

布局时，就会发生这种情况，然后返回到javascript，而不是在每个帧上沿管道平滑移动。要做到这一点，请避免获取布局属性，然后直接在循环中设置它们

以下是导致同步布局的原因列表：

阅读更多：

步骤3：
将页面上需要定期重新绘制的组件移动到新层中

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

为此，请使用
将更改
css属性，告知浏览器将其移动到新层，并使用
transform:translateZ（0）如果要强制broswer移动它。
使用inspect元素尝试获取特定原因的句柄。
此外，如果尚未安装FireBug，请安装并使用它，而不是默认的inspect元素。这将为您提供更多的代码详细信息，并允许您逐步通过脚本查找问题。
还有各种框架的FireBug插件，如果您使用其中一个框架，这些插件可以帮助诊断

我们可以对原因做出假设，或者提出解决方案；但是，只有您可以诊断代码以找到细节。
尝试减少会减慢滚动的css，特别是rgba颜色、非1不透明和框阴影。这对我来说不是一个真正的选项。只是您不想在firefox上平滑滚动，对吧？如果您想进入客户端浏览器并控制它，请开发一个web扩展。您是否尝试过使用任何滚动条库，如或？