0

我有一个带有评论部分的反应应用程序。用户可以评论 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>

涉及文件时，如何使滚动正常工作？

4

1 回答 1

1

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

于 2020-10-20T16:10:33.217 回答