Javascript 离子型2+；角度2：自动滚动至列表底部/页面/聊天

我试图用“聊天”和“内容”两部分来编写一个页面。我想一个“聊天”部分的网页自动滚动到底部没有效果。聊天室是一个包含多个

的

项目1
项目2
....
项目20
项目21

我使用的是Javascript，不是typescript，我不想使用jQuery。 谢谢：）

---

另外，当我转到“内容”部分并返回“聊天”时，我想再次自动滚动聊天。

如果您的

离子列表

元素具有固定高度，这应该可以工作

<ion-list id="item-list">
    <ion-item> item 1 </ion-item>
    <ion-item> item 2 </ion-item>
    [...]
    <ion-item> item 20 </ion-item>
    <ion-item> item 21 </ion-item>
</ion-list>

[...]

<script>
    var itemList = document.getElementById("item-list");
    itemList.scrollTop = itemList.scrollHeight
</script>

项目1
项目2
[...]
项目20
项目21
[...]
var itemList=document.getElementById（“项目列表”）；
itemList.scrollTop=itemList.scrollHeight

首先，@rinukkusu的答案是正确的，但它对我的案例不起作用，因为

（

的父代）有一些bug（ionic开发者正在研究），所以我必须将该元素与

滚动：隐藏

，并在其中创建第二个内容来应用自动滚动。 最后，使用右边的css，我在页面加载时调用了

construtor

上的函数，然后每次用户单击“聊天”部分时都调用该函数

chat.html

<!-- I create the segment and call the `autoScroll()` when users clicks on "chat" -->
<ion-toolbar primary class="toolbar-segment">
    <ion-segment light [(ngModel)]="segment">
        <ion-segment-button value="chat" (click)="autoScroll()">
            Chat
        </ion-segment-button>
        <ion-segment-button value="profile">
            Profile
        </ion-segment-button>
    </ion-segment>
</ion-toolbar>

<!--I wrote the css inline just as example. 
  DON'T do it on your project D: -->

<!-- overflow:hidden prevent the ion-content to scroll -->
<ion-content [ngSwitch]="segment" style="overflow: hidden;">

    <!-- height: 100% to force scroll if the content overflows the container.
         #chat-autoscroll is used by javascript.-->
    <div class="content-scroll" id="chat-autoscroll" *ngSwitchWhen="'chat'" style="height: 100%; overflow: scroll">
        (... make sure the content is bigger 
        than the container to see the auto scroll effect ...)
    </div>

    <!-- here it's just a normal scroll  -->
    <div *ngSwitchWhen="'profile'" class="content-scroll" style="height: 100%; overflow: auto">
      (... content of profile segment ...)
    </div>

</ion-content>

constructor () {

    // when the user opens the page, it shows the "chat" segment as initial value
    this.segment = 'chat'; 

    // when page loads, it calls autoScroll();
    if (this.segment == 'chat') {
        console.log('chat');
        this.autoScroll();
    };
}

/*Here comes the tricky. 
 If you don't use setTimeout, the console will say that
 #chat-autoscroll doesn't exist in the first call (inside constructor). 
 This happens because the script runs before the DOM is ready. 
 I did a workaround with a timeOut of 10ms.
 It's enough time to DOM loads and then autoScroll() works fine.
*/
autoScroll() {
    setTimeout(function () {
        var itemList = document.getElementById("chat-autoscroll");
        itemList.scrollTop = itemList.scrollHeight;
    }, 10);
}

结论： 该函数被调用两次。当页面被加载（构造器）并且每次用户返回“聊天”段时。（单击）=“自动滚动（）

我希望这对某人有帮助。如果你知道更好的方法，让我知道！几周前，我开始与Angular2和Ionic2一起比赛，所以这里有很多我可能缺少的概念/基础

谢谢：）

我是这样做的：

chatPage.html

<ion-content #content padding class="chatPage">

  <ion-list no-lines>
    <ion-item *ngFor="let msg of messages" >
      <chat-bubble [message]="msg"></chat-bubble>
    </ion-item>
  </ion-list>

</ion-content>

此外，每当mychatPage需要在列表中显示另一条聊天信息时（收到新信息或发送新信息），我都会使用以下代码滚动到新底部：

setTimeout(() => {
  this.content.scrollToBottom(300);//300ms animation speed
});

---

类型脚本的更新

当我给出这个答案时，我正在使用Ionic 2项目的JavaScript版本。随着时间的推移，我切换到TypeScript，但我忘记了更新答案，因此，这里有一个关于chatPage.js（ts）的小更新：

chatPage.ts

import {Component, ViewChild} from '@angular/core';

@Component({
  templateUrl: 'build/pages/chatPage/chatPage.html',
  queries: {
    content: new ViewChild('content')
  }
})
export class ChatPage {
  constructor() { 

  }

  //scrolls to bottom whenever the page has loaded
  ionViewDidEnter(){
    this.content.scrollToBottom(300);//300ms animation speed
  }
}

import {Component, ViewChild} from '@angular/core';

@Component({
  templateUrl: 'chatPage.html'
})
export class ChatPage {
  @ViewChild('content') content:any;

  constructor() { }

  //scrolls to bottom whenever the page has loaded
  ionViewDidEnter(){
    this.content.scrollToBottom(300);//300ms animation speed
  }
}

就这么做吧：

public ionViewDidEnter(){
    this.content.scrollToBottom(300);
}

---

Ionic有一个选项可以做到这一点，而且效果非常好：这是使用angular 2+和Ionic最合适的方法

import { Content } from ‘ionic-angular’; export class CommentsPage{ @ViewChild(Content) content: Content; ionViewWillEnter(): void { this.scrollToBottom(); } scrollToBottom() { setTimeout(() => { this.content.scrollToBottom(); }); } } 从“离子角度”导入{Content}； 导出类注释集{ @ViewChild（内容）内容：内容； ionViewWillEnter（）：无效{ 这个.scrollToBottom（）； } scrollToBottom（）{ 设置超时（（）=>{ this.content.scrollToBottom（）； }); } } 另一个解决方案是“观察”滚动视图中的更改并自动滚动。 i、 e.如果出现新的HTML元素，则滚动至底部

export class MessagesPage implements OnInit, OnDestroy {
  autoScroller: MutationObserver;

  ngOnInit() {
    this.autoScroller = this.autoScroll();
  }

  ngOnDestroy() {
    this.autoScroller.disconnect();
  }

  autoScroll(): MutationObserver {
    const autoScroller = new MutationObserver(this.scrollDown.bind(this));

    autoScroller.observe(this.messagesList, {
      childList: true,
      subtree: true
    });

    return autoScroller;
  }

  scrollDown(): void {
    this.scroller.scrollTop = this.scroller.scrollHeight;
    this.messageEditor.focus();
  }

  private get messageEditor(): HTMLInputElement {
    return <HTMLInputElement>document.querySelector('ion-input');
  }

  private get messagesList(): Element {
    return document.querySelector('.messages');
  }

  private get scroller(): Element {
    return this.messagesList.querySelector('.scroll-content');
  }
}

导出类MessagesPage实现OnInit、OnDestroy{
自动克隆：变异观察者；
恩戈尼尼特（）{
this.autoScroll=this.autoScroll（）；
}
恩贡德斯特罗（）{
这个.autoScroller.disconnect（）；
}
autoScroll（）：MutationObserver{
const autoScroller=newmutationobserver（this.scrollDown.bind（this））；
autoScroller.observe（此.messages列表{
儿童名单：是的，
子树：真
});
返回自动旋转器；
}
scrollDown（）：void{
this.scroller.scrollTop=this.scroller.scrollHeight；
this.messageEditor.focus（）；
}
私有get messageEditor（）：HTMLInputElement{
返回文档。查询选择器（'ion-input'）；
}
private get messagesList（）：元素{
return document.querySelector（'.messages'）；
}
private get scroller（）：元素{
返回此.messagesList.querySelector（'.scroll content'）；
}
}

模板：

<ion-content>
  <ion-scroll scrollY="true" class="messages">
    <ion-list>
      <div *ngFor="let message of messages">
        <p [innerHtml]="message.text"></p>
      </div>
    </ion-list>
  </ion-scroll>
</ion-content>

<ion-footer>
  <ion-toolbar>
    <ion-input [(ngModel)]="message" type="text" placeholder="Write a message..." autocomplete="true" spellcheck="true" tappable></ion-input>
    <ion-buttons end>
      <button ion-button icon-only (click)="sendMessage()">
        <ion-icon name="paper-plane"></ion-icon>
      </button>
    </ion-buttons>
  </ion-toolbar>
</ion-footer>

---

（摘自）

这可能对某人有所帮助，我给出了类似的答案。这是在离子3中实现的

我使用了

ngAfterViewChecked（）

来实现此功能。以下是我的代码结构-

home.html-

<ion-content padding>
    <div #scrollMe id="messages-container" style="overflow: auto; height: 100%;">
        // All messages elemets. Scroll
    </div>
</ion-content>

import { Component,ViewChild, AfterViewChecked, * * } from '@angular/core';
.
.
export class HomePage implements AfterViewChecked{
    // used for scrolling the pane
    @ViewChild('scrollMe') private myScrollContainer: ElementRef;

    ngAfterViewChecked() {
        this.scrollToBottom();
    }

    scrollToBottom(): void {
        // method used to enable scrolling
        this.myScrollContainer.nativeElement.scrollTop = this.myScrollContainer.nativeElement.scrollHeight;
    }
}

---

.scrollTop

和

.scrollHeight

是JavaScript属性

我添加了一个检查，查看用户是否试图向上滚动

<div style="overflow: scroll; height: xyz;" #scrollMe [scrollTop]="scrollMe.scrollHeight">
    <div class="..." 
        *ngFor="..."
        ...>  
    </div>
</div>

---

这是我使用Ionic CLI 5.4.16的解决方案：

在HTML页面中：

<ion-content #content>

---

抱歉，什么也没发生：/n您能再分享一点代码吗？比如，这是一个模板，或者你希望javascript向下滚动到哪里？嘿，对不起，它在codepen上工作，这里的问题是我使用的是flexbox，所以它不能工作。我会再试一次，几分钟后就放弃反馈。一种离子溶液而不是棱角状溶液，值得更多的改进。当当前页面添加新消息或内容时，您如何调用此方法。我可以在ionViewWillEnter上滚动到底部，但如果我在添加内容时调用它，应用程序就会停止。@fanbondi你在说什么，只需在添加数据时调用滚动到底部即可解决超时问题修复更新NGO的延迟？因为在没有超时的情况下，它会滚动到底部，但会在之后添加新行scrolling@Ismail这是正确的。这就是添加超时的原因。

this.content

未定义。@smukov我按照您的步骤操作，但对于仍在

this.content

中接收到

未定义的
的人，获取null的底部。尝试添加以下内容：1）在模板中，将
#content
添加到离子内容标签。示例：
2）在控制器中，添加
内容
导入，示例：
从“ion angular”导入{Content}
并修改
内容
声明如下：
@ViewChild（content）private content:content。希望这能帮助别人。
<ion-content #content>

@ViewChild('content', { static: true }) content: any;



 constructor(){}

  getInformation(){

//Your Code 

..........

//At the end

  **this.content.scrollToBottom();**

  }