文档章节

Angular实现DIV自动滚屏到底部scrollToBottom

lieefu
 lieefu
发布于 2017/04/19 14:24
字数 237
阅读 55
收藏 0

设计一个聊天网页,需要把显示聊天内容的div自动滚屏到底部,但是div缺少scrollTo函数,变通的方法是

div.scrollTop = div.scrollHeight

但在angular中,如何找到这个时机呢? ngFor执行完毕是个时机,但ngFor语句没有提供finished事件。这个事件只能自己制造。

<li *ngFor="let item in Items; let last = last">
  ...
  <span *ngIf="last">{{ngForCallback()}}</span>
</li>

 component中增加ngForCallback方法

public ngForCallback() {
  ...
}

推荐使用AfterViewChecked and @ViewChild 方法,下面详细介绍:

在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) { }                 
    }
}

在template中:

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

AfterViewChecked的缺陷是每次组件试图检查后都调用,input控件中,每次keyup都需要检查,调用次数太多。

参考资料:

  1. http://stackoverflow.com/questions/35819264/angular-2-callback-when-ngfor-has-finished
  2. http://stackoverflow.com/questions/35232731/angular2-scroll-to-bottom-chat-style

© 著作权归作者所有

共有 人打赏支持
lieefu
粉丝 91
博文 116
码字总数 24677
作品 3
济南
高级程序员
私信 提问
谷歌发布 AngularJS 1.0,允许扩展HTML语法

谷歌今天发布了一个全新的Web模板——AngularJS 1.0。 谷歌称, AngularJS可以让你扩展HTML的语法,以便清晰、简洁地表示应用程序中的组件,并允许将标准的HTML作为你的模板语言。AngularJS...

oschina
2012/06/15
3.9K
8
OSChina 技术专题之 AngularJS 更新版(201412)

Angular JS (Angular.JS) 是一组用来开发Web页面的框架、模板以及数据绑定和丰富UI组件。它支持整个开发进程,提供web应用的架构,无需进行手工DOM操作。 AngularJS很小,只有60K,兼容主流浏...

OSC编辑部
2014/10/17
11.1K
26
AngularJs学习笔记--bootstrap

一、总括 本文用于解释Angular初始化的过程,以及如何在你有需要的时候对Angular进行手工初始化。 二、Angular <script> 标签 本例用于展示如何通过推荐的路径整合Angular,实现自动初始化。...

武文海
2015/02/05
0
0
使用angular.bootstrap完成模块的手动加载

之前我们看到使用ng-app指令,可以实现模块的自动加载。现在我们看下,angular中如何手动加载模块。需要使用到angular.bootstrap这个函数。 [html] view plaincopy <html> <head> <script sr...

前端热爱者
2017/11/07
0
0
AngularJS应用开发思维之1:声明式界面

这篇博客之前承接上一篇:http://www.cnblogs.com/xuema/p/4335180.html 重写示例:模板、指令和视图 AngularJS最显著的特点是用静态的HTML文档,就可以生成具有动态行为的页面。 还是前面的...

笔阁
2015/03/16
0
0

没有更多内容

加载失败,请刷新页面

加载更多

使用 top instance 命令查看运行中 MaxCompute 作业

我们都知道,在 MaxCompute Console 里,可以使用下面的命令来列出运行完成的 instance 列表。 show p|proc|processlist [from <yyyy-MM-dd>] [to <yyyy-MM-dd>] [-p <project>] [-limit <nu......

阿里云云栖社区
8分钟前
1
0
PostgreSQL SSL证书生成与启用

ref: https://yq.aliyun.com/articles/14965

YuanyuanL
10分钟前
1
0
了解 BFC

概念 MDN中的定义 块格式化上下文(Block Formatting Context,BFC) 是Web页面的可视化CSS渲染的一部分,是布局过程中生成块级盒子的区域,也是浮动元素与其他元素的交互限定区域。 具有 BF...

小草先森
11分钟前
1
0
使用MaxCompute Java SDK 执行任务卡住了,怎么办?

场景一 用户A A: “亲,用 MaxCompute Java SDK 跑作业,为什么卡住不动了?” me: “有 Logview 吗?发来看下” A: “没有,我用的是SDK,没Logview” 场景二 用户B B :“亲,用 MaxCompu...

阿里云官方博客
21分钟前
1
0
使用Ant Design 和Vue,React中后台开发套餐

前言 目前Ant Design 提供 React 和 Vue 两种整合开发框架,开箱即用的中台前端/设计解决方案,可适合中小公司统一后台开发技术栈,本来只是业务信息系统,不要重复造轮子 AntDesign of Rea...

郭恩洲_OSC博客
28分钟前
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部