EmberJS：滚动到 div 中添加的最后一项

Question

我有一个 ember 应用程序，它包含一个固定高度的 div 和 overflow-y: scroll。

每当我添加一个对象时，都会将一个新的 div 添加到主 div:

<div class="main-container">
<div class="added-item"></div>
<div class="added-item"></div>
  ...
</div>

随着列表变长，我想在 Ember 应用程序创建新记录后滚动到最后一项。

我的模板循环如下所示：

<div class="task-comments">
  {{#each comment in comments}}
  <div class="comment">
    <div class="comment-content">
      <span class="author">
        <img {{bind-attr src=comment.userObject.userProfile.avatar}} alt="Avatar">
      </span>
      <p class="comment-user">
        <strong>{{comment.userObject.username}}</strong>
      </p>
      <p>{{comment.comment}}</p>
    </div>
  </div> 
  {{/each}}
</div>

在这种情况下，

.task-comments 是主要的 div。

我该怎么做？

Answer 1

关键部分是在评论添加到列表并渲染到屏幕后执行滚动到所需位置的JS。

在您看来，使用 Ember.run.scheduleOnce('afterRender'('afterRender', this, function() {..})[=21 将滚动代码安排到运行 =].您可以找到一个简短的工作示例 here.

如果您不熟悉 Ember 运行循环，请查看 at the official docs

EmberJS：滚动到 div 中添加的最后一项

EmberJS: Scroll to last item added in div

javascript

jquery

ember.js