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

Question

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

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

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

简化代码如下：

<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"的显示更多按钮。