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

【问题标题】：Ionic 3- How to scroll down content on button click?Ionic 3-如何在单击按钮时向下滚动内容？
【发布时间】：2018-05-06 16:22:44
【问题描述】：

我正在开发一个 ionic 聊天应用程序。我想在单击发送文本按钮时自动向下滚动内容。您可以在图片中查看。

这是我的代码：

<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>

【问题讨论】：

标签： javascript angularjs ionic-framework ionic3

【解决方案1】：

首先从 ionic-angular 导入内容

 import { Content } from 'ionic-angular';

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

 @ViewChild(Content) chatlist : Content

然后在你的按钮中点击

this.chatlist.scrollToBottom();

演示link

【讨论】：

显示错误“无法读取未定义的属性'scrollToBottom'”
你能看看我提供的演示链接吗
是的，我尝试了同样的方法，但仍然显示相同的错误“无法读取未定义的属性 'scrollToBottom'”。

【解决方案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.

您可以设置一个技巧，将 scrollTop 分配为 Infinity 以使其滚动到底部。

el.scrollTop = Infinity;

但不建议这样做，在具有 Infinity 和滚动更新的不同浏览器上可能会有一些副作用。完全控制您的代码并在需要时更新 scrollTop 总是更好的。

我希望它有所帮助。

【讨论】：