如何更顺畅地移动固定元素？

Question

我有一些带有{position: absolute} 的元素。 当我滚动页面时，我想移动这些元素。

我设置了window.addEventListener(scroll, this.handleScroll)。

简化代码：

componentDidMount = () => {
  window.addEventListener('scroll', this.handleScroll);
}

handleScroll {
  var scrollLeft = window.pageXOffset;
  this.setState({scrollLeft: scrollLeft})
}
...
<div style={{position: "absolute", left: this.state.scrollLeft + "px" 
}}>
   content 
</div>
<div style={{position: "absolute", left: this.state.scrollLeft + "px" 
}}>
   content 
</div>
....

在我的 PC 上效果很好，但在手机上，当元素移动时，我看到一些挂起。如何更顺畅地移动元素？

Answer 1

似乎您在这里尝试实现的目标，据我了解是使内容具有与当前滚动位置相同的位置，可以通过在某些元素上使用 position: fixed 来完成。

来自 MDN：

https://developer.mozilla.org/en-US/docs/Web/CSS/position

元素从正常的文档流中移除；没有为页面布局中的元素创建空间。相反，它相对于屏幕的视口定位，并且在滚动时不会移动。它的最终位置由顶部、右侧、底部和左侧的值确定。

无论您的滚动位置如何，这都会使内容粘在屏幕上，因此它会在您滚动时“跟随”您。

Answer 2

查看您提供的代码的 sn-p，您似乎将窗口滚动事件挂钩到一个处理程序，该处理程序更改了组件的 state，这反过来又会更新组件的位置.不幸的是，这种安排不仅在手机浏览器上会很慢/不稳定，而且在稍旧的桌面浏览器上也是如此。 React 虽然通常很快，但有一个内部计时器，它可能偶尔会指示它批量处理state 更新（当短时间内发生太多状态更改时，窗口滚动事件就是这种情况）。所以，目前你正处于一场艰苦的战斗中：

• React 的内部状态转换引擎（时间和批次更新），以及

• 布局重绘过程，由于使用absolute定位选择，每次您请求将组件定位在正确位置时，都必须进行大量重新计算。

  李>

您可以通过以下方式改善情况并获得更顺利的结果：

• 尽可能使用fixed 位置。这将由浏览器本地处理，提供出色的刷新率。如果，正如您所阐述的，您只需要将组件固定在一个轴上，仍然看看您是否可以从 fixed 位置开始并使用窗口滚动回调调整浮动轴。

• 在 React 的状态转换流程之外处理元素的重新定位。在创建组件时，为它们创建refs，并以普通的 Javascript 方式处理它们的定位。与 React 状态机解耦可能会极大地改善事情。以下是获取 DOM 元素引用的方法：https://reactjs.org/docs/refs-and-the-dom.html 获得该引用后，您可以直接在窗口滚动回调上对其进行操作，避免等待 React 状态更新。

• 使用translate-x 和translate-y 而不是left 和top 重新定位您的组件。 translate 属性属于transform CSS 指令组，与left 和top 属性根本不同，因为它们不需要消耗大量的layout re-render浏览器的渲染时间。只需将left 和top 属性替换为translate-x 和translate-y，您可能会获得很多性能改进。此外，如果你将这种方法与上面的建议（在 React 状态转换流之外操纵位置）结合起来，你应该会看到一个大大改进、更流畅的体验。