Question

我有一个余烬应用程序，它由一个固定高度和overflow-y: scroll的div组成。

每当我添加一个对象时，都会在主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'，this，function（）{..}）安排滚动代码运行。您可以找到一个简短的工作示例here。

如果您不熟悉Ember跑圈，请查看at the official docs

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

1 个答案: