滚动到div的底部而不使用setTimeout() [英] Scrolling to bottom of div without using setTimeout()

问题描述

我正在使用Firebase制作内部实时聊天系统.我打这个电话以获得所有聊天消息的列表:

I am making an internal live chat system using Firebase. I make this call to get a list of all chat messages:

firebase.database().ref('chatrooms/'+this.roomkey+'/chats').on('value', resp => {

    this.chats = [];
    this.chats = snapshotToArray(resp);

    setTimeout(() => {
        if(this.content._scroll) { this.content.scrollToBottom(0); }
    }, 1000);

});

在我看来，我有此HTML可以在聊天中循环:

In my view I have this HTML to loop through the chats:

<ion-content>
  <ion-list>
    <ion-item *ngFor="let chat of chats" no-lines>
      <div class="chat-status" text-center *ngIf="chat.type==='join'||chat.type==='exit';else message">
        <span class="chat-date">{{chat.sendDate | date:'short'}}</span>
        <span class="chat-content-center">{{chat.message}}</span>
      </div>
      <ng-template #message>
        <div class="chat-message" text-right *ngIf="chat.user === nickname">
          <div class="right-bubble">
            <span class="msg-name">Me</span>
            <span class="msg-date">{{chat.sendDate | date:'short'}}</span>
            <p text-wrap>{{chat.message}}</p>
          </div>
        </div>
        <div class="chat-message" text-left *ngIf="chat.user !== nickname">
          <div class="left-bubble">
            <span class="msg-name">{{chat.user}}</span>
            <span class="msg-date">{{chat.sendDate | date:'short'}}</span>
            <p text-wrap>{{chat.message}}</p>
          </div>
        </div>
      </ng-template>
    </ion-item>
  </ion-list>
</ion-content>

这是我相关的CSS:

ion-content {
  height: 100%;
  overflow: hidden;
  .item-md, .item-ios {
    background: none;
  }
}

当前有30条聊天消息.它们是从Firebase加载的，然后一秒钟后，当setTimeout完成时，用户将自动滚动到页面底部，以便他们可以看到最新消息.这样一来，页面的加载就有些奇怪了，一秒钟后跳转到页面底部.

There are currently 30 chat messages. They are loaded from Firebase and then after a second, when the setTimeout finishes, the user is automatically scrolled to the bottom of the page so they can see the most recent message. This makes the page load a bit odd with the jump down to the bottom of the page after a second.

是否可以用某种方式代替超时来实现用户最初看到最新消息的目的?也许可以做一些触发来检测chats在视图中是否已更改，然后滚动?这似乎比固定的1秒暂停更好?

Is there any way to replace the timeout with something that will achieve the goal of the user initially seeing the most recent messages? Maybe there is some trigger that can be made that detects that chats has changed in the view and then does the scroll? This would seem better than a fixed 1 second pause?

推荐答案

检测到聊天列表更改后，您可以滚动到列表底部:

You could scroll to the bottom of the list when changes to the list of chats are detected:

• 将模板引用变量与ion-item元素(例如#chatItems)关联
• 使用ViewChildren获取ion-item个元素的QueryList
• 在ngAfterViewInit中，订阅QueryList.changes事件
• 列表更改时滚动到列表底部

• Associate a template reference variable to the ion-item elements (e.g. #chatItems)
• Use ViewChildren to get the QueryList of ion-item elements
• In ngAfterViewInit, subscribe to the QueryList.changes event
• Scroll to the bottom of the list when the list changes

<ion-content>
  <ion-list>
    <ion-item #chatItems *ngFor="let chat of chats" no-lines>
      ...
    </ion-item>
  </ion-list>
</ion-content>

export class MyComponent {

  @ViewChildren("chatItems") chatItems: QueryList<any>;

  ngAfterViewInit() {
    this.scrollContentToBottom();
    this.chatItems.changes.subscribe(() => {
      this.scrollContentToBottom();
    });
  }

  scrollContentToBottom() {
    if(this.content._scroll) { 
      this.content.scrollToBottom(0); 
    }
  }
  ...
}

注意:我使用QueryList<any>是因为我不知道ion-item组件类型.如果知道类型，则可以输入适当的类型.

Note: I used QueryList<any> because I don't know the ion-item component type. You can put the appropriate type if you know what it is.

这篇关于滚动到div的底部而不使用setTimeout()的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！