html - 某些浏览器滚动时 TranslateY 闪烁

Question

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

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

Chrome、Mozilla 等工作正常，但无法打开它。 on Edge 将在闪烁的盛宴中结束。我该如何解决这个问题？

Answer 1

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

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

What this does is that it promotes the elements to another layer, so the browser doesn’t have to consider the layout render or painting.

MDN Docs

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