DeathGhost

angular操作DOM中的滚动条 自动滚动到底部示例

这篇文章发布于 2018年11月01日 21:20 星期四 阅读 682 次,评论 0 条

DeathGhost 编辑,归类于angular »

实例应用中根据需求对DOM进行操作,这篇文章主要介绍angular如何操作DOM中元素的方法。本篇文章以发送消息为例,让滚动条实时滑动到最新消息位置(即最底部)。

一般情况下我们angular项目中很少对DOM进行操作的,但偶尔根据需求也会对元素进行操作;下面看看在angular中如何获取DOM元素内容。

angular滚动条
angular操作DOM中的滚动条

场景:模拟一个聊天窗口,发送信息后,滚动条自动滑动到最底部(如图所示)。

我们就可以借助angular中ElementRef类进行DOM操作。

ElementRef
angular操作DOM元素 - ElementRef

根据UI设计显示,信息内容布局元素高度是固定的,如果内容溢出,则显示滚动条,自动滑动到底部(也就是最新消息位置)。

具体方法,我们在组件中导入“ElementRef”:

import { Component, OnInit, AfterViewChecked, ElementRef } from '@angular/core';
constructor(
  private el: ElementRef,
) {}

接下来我们可以操作DOM中的元素(加入DOM中元素ID为"content"):

<div class="content" id="content">
  <ul class="chatContentWrap">
   ...
this.el.nativeElement.querySelector('#content')

这样和js中操作基本一样,即可获取你想要的。

按照本示例,我们还需要用到ngAfterViewChecked每次做完组件视图和子视图的变更检测之后调用)就是组件生命周期中AfterViewChecked接口中的方法。

选择布局包裹,然后将卷去高度赋等于包裹实际高度即可将滚动条置于最底部,定义此方法分别在ngAfterViewChecked()ngOnInit()中执行即可实现与上图所示。

scrollToBottom(): void {
  try {
    this.el.nativeElement.querySelector('#content').scrollTop = this.el.nativeElement.querySelector('#content').scrollHeight;
  } catch (err) {}
}
ngAfterViewChecked() {
  this.scrollToBottom();
}
ngOnInit() {
  this.scrollToBottom();
}

用户评论(当前评论共计0条)

⚠️ 评论内容需要审核方可显示。
DeathGhost

孙志锋

视觉前端爱好者

志于道,据于德,依于仁,游于艺。


孙志锋more,08年毕业于外事EC专业,从事5年服装B2C运营管理于杭;现,西安从事IT领域前端设计开发工作。
4

目录

32

文章

7

评论

🙏 到访,就是一种鼓励,谢谢你的到访!🙏

💕与君共勉💕