Ionic 3-如何在点击按钮时向下滚动内容？

Question

我正在开发离子聊天应用。我想在发送文本按钮单击时自动向下滚动内容。你可以在图片中查看。

这是我的代码：

<ion-content scrollDownOnLoad="true" id="chat-window" class="bg" no-padding>

    <ion-list>
        <ion-item text-wrap class="message" *ngFor="let chat of chats" no-lines>
            <div [class]="chat.sent_by == loggedInUserKey ? 'messageRight' : 'messageLeft'">
            <p class="text">{{chat.message}}</p>
            <p [class]="chat.sent_by == loggedInUserKey ? 'datetimeRight' : 'datetimeLeft'">
                <span *ngIf='chat.display_date'>{{chat.date}}</span>
                <span>{{chat.time}}</span>
                <span *ngIf='chat.seen' [class]="chat.sent_by == loggedInUserKey ? 'displayseen' : 'hideseen'">seen</span>
            </p>
           </div>
        </ion-item>
    </ion-list>

</ion-content>

Answer 1

首先从离子角度导入内容

 import { Content } from 'ionic-angular';

通过使用@viewChild注释，您可以在组件页面中获得ion-content引用

 @ViewChild(Content) chatlist : Content

然后在按钮中单击

this.chatlist.scrollToBottom();

demo link

Answer 2

您可以使用一些DOM节点属性，例如scrollTop，scrollLeft。

示例：

var el = document.querySelector("#chat-window");
el.scrollTop = 0; //this will make window scroll to top (if scroll is there)
el.scrollLeft = 0;

但由于没有像scrollBottom，scrollRight这样的属性。 （不是我知道的）。因此，您需要拥有一个帐户，根据内容大小，每次按钮点击必须完成多少scrollTop。

el.scrollTop = x; //x is calculated scrollTop value.

你可以设置一个hack来将scrollTop指定为Infinity，使其滚动到底部。

el.scrollTop = Infinity;

但不推荐使用Infinity和滚动更新的不同浏览器可能会产生一些副作用。完全控制代码并在需要时更新scrollTop总是更好。

我希望它有所帮助。