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();

демо ссылка

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.

Вы можете поставить хак, чтобы назначить scrollTop как Бесконечность, чтобы сделать прокрутку вниз.

el.scrollTop = Infinity;

Но это не рекомендуется, могут быть некоторые побочные эффекты в разных браузерах с Infinity и обновлением прокрутки. Всегда лучше иметь полный контроль над вашим кодом и обновлять scrollTop при необходимости.

Надеюсь, это поможет.