Javascript 滚动混合效果-除Chrome之外的所有浏览器中的性能问题

在a中收到的帮助下，我利用了一些JS和CSS变量，在滚动页面时实现了“混合”效果，如中所示

解决方案很好。。。但只有铬。不过，我已经开始在我的项目中实现这一点，在其他浏览器中的测试发现了严重的性能问题，特别是在滚动时内容块跳转。我重新访问了Firefox和Safari中的测试示例，发现了相同的问题

所以我的问题很简单，我能做些什么来提高这个效果的性能？我已经做了相当多的搜索，以找到另一种方法来实现这种效果，但迄今为止没有运气。也许我可以对我的JS进行一些修改来解决这些问题

我在下面加入了我的代码以供参考。任何帮助都将不胜感激

window.onscroll=function（）{
var scroll=window.scrollY | | | window.scrollTop | | document.getElementsByTagName（“html”）[0]。scrollTop；
document.documentElement.style.setProperty（'--scroll var'，scroll+“px”）；
}

：根目录{
--滚动变量：0px
}
身体{
保证金：0；
填充：0；
}
氢{
字体大小：48px；
}
p{
字号：18px；
}
部分{
最小高度：100vh；
宽度：100%；
文本对齐：居中；
溢出：隐藏；
背景附件：固定！重要；
背景尺寸：封面！重要；
背景重复：不重复！重要；
位置：相对；/*对于溢出效果是必需的*/
高度：100vh；
}
第一节{
背景：线性梯度（rgba（74,180,220,85），rgba（74,180,220,85）），url(https://picsum.photos/1920/500/?image=1057);
}
第一节内容{
/*第一部分从0开始*/
顶部：计算（（0*100vh）+var（--滚动var））；
}
第二节{
背景：线性梯度（rgba（103198180.85），rgba（103198180.85）），url(https://picsum.photos/1920/500/?image=1067);
}
第二节内容{
/*第二部分，所以我们需要删除顶部部分的高度
为了使so-100vh的位置相同，我们对其他部分也这样做
*/
顶部：计算（-1*100vh）+var（--var））；
}
第三节{
背景：线性梯度（rgba（5123188.85），rgba（5123188.85）），url(https://picsum.photos/1920/500/?image=1033);
}
第三节内容{
顶部：计算（-2*100vh）+var（--var））；
}
第四节{
背景：线性梯度（rgba（187216100.85），rgba（187216100.85）），url(https://picsum.photos/1920/500?image=1063);
}
第四节内容{
顶部：计算（-3*100vh）+var（--滚动var））；
}
.内容{
位置：绝对位置；
身高：100%；
宽度：100%；
显示器：flex；
对齐项目：居中；
证明内容：中心；
}
.复制{
颜色：#fff；
字体系列：“非衬线”，衬线；
字体大小：300；
最大宽度：300px；
}
.按钮{
边框：2倍实心#fff；
边界半径：3px；
填充：15px 25px；
显示：内联块；
宽度：自动；
字体系列：“助手”，无衬线；
字号：700；
文本转换：大写；
字母间距：1px；
过渡：放松所有人；
}
.按钮：悬停{
背景：#fff；
颜色：#333；
光标：指针；
}

标题1
我不知道是谁干的，我不知道是谁干的。莫利斯夫妇，最不常见的luctus夫妇，最不常见的ligula夫妇，最不常见的是lacinia-odio-sem-nec-elit夫妇

标题2
我不知道是谁干的，我不知道是谁干的。莫利斯夫妇，最不常见的luctus夫妇，最不常见的ligula夫妇，最不常见的是lacinia-odio-sem-nec-elit夫妇

标题3
我不知道是谁干的，我不知道是谁干的。莫利斯夫妇，最不常见的luctus夫妇，最不常见的ligula夫妇，最不常见的是lacinia-odio-sem-nec-elit夫妇

行动呼吁
按钮

我认为，通过简化计算最高价值的逻辑，您可以解决问题。您可以为每个部分使用固定的顶部值，然后为所有部分调整

页边距顶部

您还可以删除CSS变量：


var all=document.querySelectorAll（'.content'）；
var l=全部长度；
window.onscroll=函数（）{
var scroll=window.scrollY | | | window.scrollTop | | document.getElementsByTagName（“html”）[0]。scrollTop；
对于（var i=0；iOh，那么我的解决方案就不好了：pSo我已经玩了一段时间了。可以在FF中复制您的问题，但还没有找到解决方案。您应该阅读以下内容：@TemaniAfif Haha，老实说，我认为您的解决方案非常出色。我只是希望有一个改进性能的解决方案。有什么想法吗？@Geuis，这是一本不错的书o了解为什么会出现这些问题…谢谢。不幸的是，文章中详细介绍的唯一行动方案是找到CSS替代方案（如果我正确理解了所有内容）不过，我认为在这个特定的场景中可能是不可能的。你认为我应该考虑其他的外卖吗？是的，只有Chrome支持我的绝佳解决方案，另一个浏览器仍然需要改进：P……我尝试了很少的东西，仍然是同一个问题：即使我删除了复杂的计算和CSS VAR。