1. 程式人生 > >angular5 自動滾動到最底部

angular5 自動滾動到最底部

The Component:

import {..., AfterViewChecked, ElementRef, ViewChild, OnInit} from 'angular2/core'
@Component({
    ...
})
export class ChannelComponent implements OnInit, AfterViewChecked {
    @ViewChild('scrollMe') private myScrollContainer: ElementRef;

    ngOnInit() { 
        this.scrollToBottom();
    }

    ngAfterViewChecked() {        
        this.scrollToBottom();        
    } 

    scrollToBottom(): void {
        try {
            this.myScrollContainer.nativeElement.scrollTop = this.myScrollContainer.nativeElement.scrollHeight;
        } catch(err) { }                 
    }
}

The Template:

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

相關推薦

angular5 自動滾動底部

The Component:import {..., AfterViewChecked, ElementRef, ViewChild, OnInit} from 'angular2/core' @Component({ ... }) export class Chan

JS + jQuery 實現元素自動滾動底部,兼容IE、FF、Chrome

虛擬機快照 otto class .get blog 實現 body col element HTML代碼: <ul class="tasklog-dialog-ul" id="auto_to_bottom"> <li>刪除虛擬機快照成功

SWT帶垂直滾動條的Text自動滾動底部 比如顯示聊天資訊

分享一下我老師大神的人工智慧教程!零基礎,通俗易懂!http://blog.csdn.net/jiangjunshow 也歡迎大家轉載本篇文章。分享知識,造福人民,實現我們中華民族偉大復興!        

iOS中UITableView在檢視出現時自動滾動底部(無痕,不閃動)

現在在做一個類似聊天的介面,需求是當進入聊天列表的時候,tableView自動滾動到最後一條聊天記錄。首先,tableView滾動到底部通用的是這兩種方法:1.tableView.setContentOffset(CGPoint(x:0, y:tableView.conten

禁止ScrollView自動滾動底部

開發中遇到在ScrollView中的子佈局包含ListView或者RecyclerView的時候ScrollView會自動滾動到底部。解決辦法:1:獲取ScrollView裡面一個上層任意view,然後呼叫如下方法:view.setFocusable(true);view.s

ListView資料更新後,自動滾動底部

If you would like to after you have updated by listAdapter, you want to make sure that the list is scrolled all the way to the bottom,

ScrollView巢狀ListView,GridView,ViewPager,以及這些控制元件自動滾動底部問題的解決

Google是不推薦在ScrollView 中放入一個可滾動的選單的,比如放置一個ListView、GridView、ViewPager這些控制元件的,儘量不要讓兩者巢狀,但有時候還是有這個需求,先不管它合不合理。如果直接在ScrollView中巢狀只會出現一行,然後在其中滾動,這樣不是很好,下面是我的整理

小程式裡如何使頁面自動滾動底部

在更新資料後,以及初次進入頁面,希望頁面停留在最底部 // 獲取容器高度,使頁面滾動到容器底部 pageScrollToBottom: function() { wx.createSelectorQuery().select('#j_page').boundin

Swift UITableView 插入及自動滾動底部

// // ViewController.swift // Proclamation // // Created by on 16/12/15. // Copyright © 2016年 . All rights reserved. // import UIKi

vue實現動態新增資料滾動自動滾動底部

在使用vue實現聊天頁面的時候,聊天資料動態加到頁面中,需要實現滾動條也自動滾動到底部。這時我找到網上有個外掛 vue-chat-scroll 但是安裝後發現是用不了的,報錯資訊如下: VM14383:27 [Vue warn]: Failed

iOS 如何讓UITableView顯示時自動滾動底部(不閃動)

最近在研究XMPP即時通訊,在從好友列表進入聊天頁面的時候需要UITableView(訊息列表)自動滾動到底部,如下所示: 剛開始試了兩種方法, 第一種是在viewDidAppear中設定tableView(scrollView)的contentOffs

Qt-textBrowser自動滾動底部

用textBrowser接受資料,但是超過當前文字大小後不會跟著走就看不見最新接收的資料,用這種方法每當有新資料,將自動滾動到底部: 選中textBrowser右鍵轉到槽,選擇textChanged(),然後在彈出來的函式中加程式碼: ui->textBrows

禁止 ScrollView 在子控制元件的佈局改變時自動滾動底部

在做專案的時候,遇到了一個問題,就是有下面那樣一個佈局: 某種情況下要動態改變 ViewPager 的高度,但是有時候再改變之後,整個頁面會自動滑動到最底部,而不是保持原有的位置。 解決方法: 重寫scrollview中的如下方法,並將其返回值設為0即可。 @Override

easyui datagrid 非同步載入資料時滾動條有時會自動滾到底部的問題

在使用easyui 的datagrid非同步載入資料時發現滾動條有時會自動滾到最底部。經測試發現,如果載入資料前沒有選中行則不會出現這個問題。這樣我們可以在重新非同步載入資料前取消選中行就可以避免這個問題。 //easyui datagrid 取消選中行 $("#dg").datagrid("clea

QTextEdit/QPlainTextEdit新增文字超出檢視後,滾動自動移至底部

1 void ThreadExit::onTaskPerformState(const QString& strStatus) 2 { 3 //追加文字(ui.taskStatus

【轉載】讓DIV的滾動自動滾動底部的3種方法

轉載自:指令碼之家  → 網路程式設計 → JavaScript → javascript技巧 → 讓DIV的滾動條自動滾動到最底部的3種方法(推薦)http://www.jb51.net/article/93425.htm方法一:使用錨標記要滾動到的位置,然後通過click

讓DIV的滾動自動滾動底部

要製作一個線上聊天的程式,在做最後的修飾時,需要對獲得的資訊即時滾動以保證使用者總能看到最新訊息。 聊天程式是基於AJAX設計的,沒有用框架,訊息容器是一個DIV,所以問題就在於如何控制DIV的滾動條。 但同樣的程式碼拿到我這裡卻完全失效,又仔細查了下資料說XHTML標準下scrollTop的值恆為0,解決

讓DIV中的垂直滾動自動滾到底部

在聊天視窗中當訊息增多超過訊息窗體DIV的高度時就會出現滾動條,但此時滾動條在絕大多數瀏覽器中都始終位於DIV的頂部,這樣就會導致之後的訊息看不見,必須往下拖動滾動條才能看到新的訊息,如果做到當出現滾動條時,滾動條始終位於DIV的底部呢? 方式一:設定DIV的scrollTop=scrollHeight;

各種height 以及判斷滾動條是否已拉到頁面底部

scroll box nbsp .html bject ive archive 判斷 pre DTD已聲明 IEdocument.documentElement.scrollHeight 瀏覽器所有內容高度 ,document.body.scrollHeight 瀏覽器

小程式scroll-view自動滾動下面

<scroll-view scroll-y style="height:500px;" scroll-top='{{scrolltop}}'> </scroll-view> 必須設定固定的height(高度),然後在js裡設定scroll-top值大於高度就行了,