Reactjs scrollIntoView不'；当容器中有图像/文件时，请不要向下滚动

我有一个react应用程序，它有一个评论部分。用户可以评论PDF、图像、excel和csv文件。当用户打开一个项目时，我希望带有注释的容器滚动到最底部。如果注释仅为文本，则该功能可以完美工作。但是，当有人在中添加任何类型的文件时，它将不再一直滚动到底部。它只滚动3/4左右，添加的文件越多，滚动越少

这就是它的名字：

     componentDidUpdate() {
          this.scrollToBottom()
       }

     scrollToBottom(){
         this.el.scrollIntoView({ behavior: 'smooth' })
       }

这是我的渲染中的内容：

     <div className="comments-container-parent">
              {this.props.projectComments.map((comment) => {
                return <ProjectComment  editCommentText={this.props.editCommentText} commentId={comment.id} deleteComment={this.props.deleteComment} comment={comment} projectData={this.props.projectData} />

              })}
              <div style={{ float:"left", clear:"both" }}  ref={el => { this.el = el }}></div>
     </div>

{this.props.projectComments.map（（comment）=>{
返回
})}
{this.el=el}}>

---

当涉及文件时，如何使卷轴正常工作

我最近遇到了这个问题，解决方案是确保有一个设置了固定高度的容器（div或任何东西）。动态设置高度或基于useEffect钩子中的某些逻辑设置高度不起作用。必须从一开始就设置图像的高度，这样当列表呈现时，列表的高度不会改变。

您应该能够获得div的偏移位置，然后获得div的边界矩形，并将矩形的底部值添加到偏移中，然后将窗口滚动到该y值。下面是另一篇文章，给出了一个例子（）@RyanWilson谢谢你的回复。我试过这个，得到了相似的结果。看起来，当只有文本注释时，它会滚动到底部。但是当上传文件的图像时，它不考虑图像/文件的高度。所以scrollTop是容器减去图像/文件的高度。