在某些浏览器上滚动闪烁时发生翻译

Question

为了更改滚动灵敏度/速度，我为元素分配了transfrom: translateY(x)，其中x为动态数字。该数字根据当前滚动位置而变化：

@HostListener('document:scroll', ['$event'])
onScroll($event) {
  this.translateScrollable = (scrollY) / 1.5;
}

Chrome，Mozilla等，可以正常工作，但请先打开它在Edge上将以忽悠的盛宴结束。我该如何解决？

Answer 1

考虑在将通过转换修改的元素上使用will-change属性。

.element-with-transform {
  will-change: transform;
}

这是将元素提升到另一层，因此浏览器不必考虑布局的渲染或绘画。

MDN Docs

您可能还想考虑在事件上添加限制，以限制触发回调的次数。