如何在reactjs中反转无限滚动器

Question

我正在创建一个聊天面板，我希望在该面板中向上滚动消息div时，将出现较旧的消息并附加其他消息。当消息第一次加载时，我还将消息div滚动到其高度的底部，以显示最新消息，例如聊天应用程序。我试图对此做出反应，但没有成功。我使用的模块是“ react-infinite-scroller”。它具有“ isReverse”选项，但无效。因此，任何人都可以告诉我如何使用任何react模块或仅使用javascript代码（通过手动实现反向滚动功能）来实现上述目标。

Answer 1

您可以使用React Visibikity Sensor

const VisibilitySensor = require('react-visibility-sensor');
<VisibilitySensor onChange={onChange}>
  <div>...content goes here...</div>
</VisibilitySensor>

您可以将此传感器放在包含消息的div顶部，如果到达顶部，则可以处理isVisible，现在可以添加fetchmore调用以获取更多消息