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>
....

在我的电脑上，这种方法非常出色，但在手机上，当元素移动时，我会看到一些挂起。如何更顺畅地移动元素？

Answer 1

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

React的内部状态转换引擎（时间和批量更新）和
由于使用absolute定位选项，布局重绘过程每次请求将组件放置在正确的位置时都必须进行大量重新计算。

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

尽可能使用fixed位置。这将由浏览器本地处理，提供出色的刷新率。如果您已经详细说明，只需要在一个轴上固定组件，仍然可以查看是否可以从fixed位置开始并使用窗口滚动回调调整浮动轴。
< / LI>
处理React的状态转换流程之外的元素重新定位。在创建组件时，为它们创建ref，并使用普通的Javascript方式处理它们的定位。与React状态机分离可能会大大改善事情。以下是如何获取对DOM元素的引用：https://reactjs.org/docs/refs-and-the-dom.html一旦有了这个引用，就可以直接在窗口滚动回调上操作它，并避免等待React状态更新。
使用translate-x和translate-y代替left和top重新定位您的组件。 translate属性属于transform CSS指令组，与left和top属性根本不同，因为它们不需要布局-render ，它消耗了很多浏览器的渲染时间。只需将left和top属性替换为translate-x和translate-y，您就可以获得很多性能提升。此外，如果您将此方法与上述建议结合起来（操纵React状态转换流程之外的位置），您应该会看到一个极大改进，更顺畅的体验。

Answer 2

这似乎是你想要在这里实现的，我的理解是使内容与当前滚动位置具有相同的位置，可以通过在某些元素上使用position: fixed来完成。

来自MDN：

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

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

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

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

2 个答案: