博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
Angular实现DIV自动滚屏到底部scrollToBottom
阅读量:6651 次
发布时间:2019-06-25

本文共 1202 字,大约阅读时间需要 4 分钟。

  hot3.png

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

div.scrollTop = div.scrollHeight

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

  • ... {
    {ngForCallback()}}
  •  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中:

    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

    转载于:https://my.oschina.net/lieefu/blog/882728

    你可能感兴趣的文章
    ES2017中的修饰器Decorator
    查看>>
    mysql 创建函数This function has none of DETERMINISTIC, NO SQL, or READS
    查看>>
    java中POJO类和DTO类都要实现序列化
    查看>>
    asp 支付宝 企业版 接口 支持网银接口 ,网银直接支付
    查看>>
    引用rtmp编译报错:rtmp.obj : error LNK2001: 无法解析的外部符号 __imp__timeGetTime@0
    查看>>
    Maven--要点笔记
    查看>>
    是什么让C#成为最值得学习的编程语言
    查看>>
    curl: (6) Couldn’t resolve host ‘www.ttlsa.com’【转】
    查看>>
    【C/C++】:用C实现输出日期的阴历日子
    查看>>
    jquery版本号升级不兼容的问题:$("input").attr("value")功能发生改变...
    查看>>
    基于ASP.NET WebAPI OWIN实现Self-Host项目实战
    查看>>
    linux下xargs和管道的区别
    查看>>
    FPGA开发流程1(详述每一环节的物理含义和实现目标)
    查看>>
    oc83--自定义类实现copy方法
    查看>>
    【Eclipse】Eclipse中修改项目的映射名称与端口
    查看>>
    Mongoose 利用实现HTTP服务
    查看>>
    Python pycharm 常用快捷键
    查看>>
    [LeetCode] Path Sum IV 二叉树的路径和之四
    查看>>
    oracle定时任务
    查看>>
    Cocos Creator 计时器的延时循环试用方法
    查看>>