滚动 div 在内容加载时卡在底部

Question

我有一个简单的消息应用程序，但消息的内容有时很长。因此，我实现了一个“查看更多”和“查看更少”按钮，分别显示整个内容或内容的剪辑版本。聊天视图是倒置的，以便较新的聊天更接近底部 - 如果滚动条一直位于可滚动 div 的底部，则单击“查看更多”会加载内容，但滚动条会停留在底部（因此用户必须单击“查看更多”，然后滚动到长消​​息的顶部才能开始阅读）。但是，如果用户向上滚动了一点点，单击“查看更多”的行为与预期的一样，滚动保持在当前位置。如何使滚动保持固定在当前位置，即使用户一直滚动到 div 的底部？

我尝试将填充和边距设置为可滚动 div 的底部，或者在单击消息时自动滚动到消息的顶部，但这不起作用并且是更糟糕的行为（来回捕捉）。

附上视频以澄清行为（第一个行为是错误的，第二个是正确的）： link to video

下面的简化代码：

<JsxParser ... jsx={this.state.expanded ? wholeContent : clippedContent}/>
<div>
    <button className="link pt-2 p-1"
            onClick={() => this.setState({expanded: !this.state.expanded})}>
        {this.state.expanded ? "See less" : "See more"}
    </button>
</div>

Answer 1

我假设这些显示更多/更少按钮可与 onClick 处理程序一起使用。您想要做的是将用户导航到折叠评论位于屏幕顶部的位置。您可以将按钮设置为 <a></a> 标记，将它们的 href 属性设置为等于它们对应的消息 div 我前面有一个“#”。

基本上，带有id="message1" 的div 元素和带有href="#message1" 的显示更多按钮。