首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

将元素添加到DOM - Angular 6后,滚动到页面底部

在Angular 6中,要将元素添加到DOM并滚动到页面底部,可以按照以下步骤进行操作:

  1. 首先,使用Angular的内置指令ViewChild来获取对应的DOM元素。在组件的类中,使用@ViewChild装饰器来获取对应的元素引用。例如,如果要获取一个具有#container标识的元素,可以在组件类中添加以下代码:
代码语言:txt
复制
@ViewChild('container') container: ElementRef;
  1. 接下来,在需要添加元素并滚动到底部的地方,使用Renderer2来创建新的元素,并将其添加到DOM中。在组件的构造函数中注入Renderer2,然后使用createElement方法创建新的元素,并使用appendChild方法将其添加到DOM中。例如,可以在某个方法中添加以下代码:
代码语言:txt
复制
const newElement = this.renderer.createElement('div');
// 设置新元素的内容或样式等
this.renderer.appendChild(this.container.nativeElement, newElement);
  1. 最后,使用scrollIntoView方法将页面滚动到底部。在添加元素后,可以使用scrollIntoView方法将新添加的元素滚动到可视区域。例如,可以在添加元素后添加以下代码:
代码语言:txt
复制
newElement.scrollIntoView({ behavior: 'smooth', block: 'end' });

这样,当将元素添加到DOM后,页面将自动滚动到底部。

关于Angular 6的更多信息和详细介绍,可以参考腾讯云的Angular产品文档:Angular产品介绍

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

【移动端bug】iOS 下 Input 和 fixed 的问题

然后我们还需要明确一个事情,就是 当激活定位元素的输入框时,页面没有内容了,无法往上的时候 那么是不会出现光标错位的问题的,像下面这样 ?...定位元素输入框激活时,页面已经滚到底部 下面来看下实际表现情况 因为动图可能不好看明白,直接用三张图 第一步,正常情况下,定位元素出现在页面中,保证此时底部页面已经滑到底部,无法往上滚动 ?...那么我们从上面两种现象,可以得出一个结论 1、页面已经滚动到底, 定位元素输入框,唤起键盘,再收起键盘,定位元素的 实际DOM 会停留在唤起键盘的位置 ,跟显示的元素错位了 2、页面没有滚动到底,定位元素输入框...,唤起键盘,定位元素的 实际DOM 就是正常的 3证明一下猜想 1 、证明聚焦再失焦,定位元素的实际dom是否跟显示元素错位了 我对比了 新打开的定位元素输入框距顶高度 和 聚焦又失焦操作的 定位元素输入框距顶高度...发现,的确高度不一样,的确实际DOM 和 显示的元素 错位了 2 、证明没有滚动到底部时,实际DOM 的位置是正常的,和显示元素对应 ?

4.4K61

Js处理滚动条和日期框

).get_attribute(属性名称) driver.find_element_by_xpath("").get_attribute("style") JS有2种方式 1.通过Js处理滚动条 如果元素动到可见区域之后...滚动条不是html页面元素,它是浏览器的元素。想获取浏览器的元素,就不能走常规套路啦,要通过javascript来执行。 不是所有的元素都一定要拖动到可见区域才能操作的。...例如百度搜索中,最后选择这个页面跳转: ? 例如底部页面跳转:有的系统,虽然进来是这个地方,想操作页面底部元素,可以操作,也不需要拖动滚动条,它会自动将它拖动到可见区域,然后去操作它。...5)找到的element对象传给argument[0] 6)方法.scrolllntoView()滚动到可见区域。...例如元素页面正中间,想将它滚动到可见区域,必须有向上和向下这2种做法。 如果你希望他向上。 一种,.scrolllntoView()默认跟页面顶部对齐: ?

10.9K10
  • 【兼容性】H5滚动穿透解决方案

    ,当元素动到顶部和底部的时候,再滚动,仍然会触发document 滚动 为什么呢?...之前我们说了,浏览器需要尽可能响应滚动行为,element 滚到两端 element 不了,那我就 document 所以我们最好监听 element 滚到 顶部和 底部的时机,继续禁止滚动行为 var...这个问题测试了,只在 ios 中存在,滚动穿透的顺序是 子->父->document,而 安卓和 鸿蒙 则不会,子不了,直接document 这个是实际的dom 父子关系才会,视觉上的 父子关系没有这个问题...但是子元素 调用了 stopPropagation() 之后,不仅元素可以滚了,还会导致滚动穿透(毕竟只要元素就能发生穿透) 但是document 还是不会滚动的 3滚动穿透的触发条件 一次没有抬起的滚动行为...(手没有离开屏幕)导致元素动到顶部或者 底部之后,如果手还在屏幕上往两端滑,并不会触发滚动穿透 如果你把元素动到 两端不可之后,抬起手,再按下去,往不可的方向移动,此时才会发生 滚动穿透 之前我们说了

    5.8K20

    Angular 显示英雄列表

    在本页面,你扩展《英雄指南》应用,让它显示一个英雄列表, 并允许用户选择一个英雄,查看该英雄的详细信息。 创建模拟(mock)英雄数据 你需要一些英雄数据以供显示。...主从结构 当用户在主列表中点击一个英雄时,该组件应该在页面底部显示所选英雄的详情。 在本节,你监听英雄条目的点击事件,并更新英雄的详情。...click 外面的圆括号会让 Angular 监听这个  元素的 click 事件。 当用户点击  时,Angular 就会执行表达式 onSelect(hero)。...英雄显示在列表中,当你单击英雄的名字的时候,有关你单击英雄的详细信息就显示在页面底部了。...只要把 [class.some-css-class]="some-condition" 添加到你要施加样式的元素上就可以了。

    4K30

    AngularDart4.0 英雄之旅-教程-05多组件 顶

    在这个页面中,您将通过英雄细节划分为单独的,可重用的组件来迈向这个方向的第一步。 当你完成,应用程序应该看起来像这样。...@Component注解提供组件的Angular元数据。 CSS选择器名称hero-detail将与在父组件的模板中标识该组件的元素标签相匹配。...在本教程页面结尾处,您将向AppComponent模板添加一个元素。...Hero详情模板 要将英雄细节视图移动到HeroDetailComponent,请从AppComponent模板的底部切割英雄细节内容,并将其粘贴到@Component注解的新模板参数中。...这是代表HeroDetailComponent的元素的标签名称。 在AppComponent模板的底部附近添加一个元素,英雄细节视图。

    1.8K10

    Angular 显示英雄列表

    在本页面,你扩展《英雄指南》应用,让它显示一个英雄列表, 并允许用户选择一个英雄,查看该英雄的详细信息。 创建模拟(mock)英雄数据 你需要一些英雄数据以供显示。...主从结构 当用户在主列表中点击一个英雄时,该组件应该在页面底部显示所选英雄的详情。 在本节,你监听英雄条目的点击事件,并更新英雄的详情。...click 外面的圆括号会让 Angular 监听这个  元素的 click 事件。 当用户点击  时,Angular 就会执行表达式 onSelect(hero)。...英雄显示在列表中,当你单击英雄的名字的时候,有关你单击英雄的详细信息就显示在页面底部了。...只要把 [class.some-css-class]="some-condition" 添加到你要施加样式的元素上就可以了。

    4.4K70

    AngularDart 4.0 高级-结构指令 顶

    Angular拥有强大的模板引擎,可以让我们轻松操纵元素DOM结构。 本指南介绍Angular如何用结构指令操纵DOM,以及如何编写自己的结构指令来完成相同的操作。 尝试一下实例(查看源代码)。...Angular这个符号解析成一个围绕宿主元素及其后代的标记。 每个结构指令都与该模板有所不同。...顶部段落在DOM中。 底部,废弃的段落不是; 取而代之的是关于“模板绑定”的评论(稍后更多)。...当条件为false时,NgIf从DOM中删除它的宿主元素,将它从DOM事件(它所依附的)中分离出来,组件从Angular变化检测中分离出来并销毁它。 组件和DOM节点可以被垃圾收集并释放内存。...其余的,包括它的class属性,移动到元素中。 这些形式都没有实际呈现。 只有最终产品在DOM中结束。 ?

    16.1K20

    async 和 defer 的区别

    HTML 中的 元素定义了6个属性: async:可选,表示立即下载脚本,但不应该妨碍页面中其它的操作,比如下载其它资源或者等待加载其它脚本,只对外部脚本文件有效。...延迟脚本 defer HTML4.01 中为 增加了 defer 属性,这个属性用来表明脚本执行的时候不会影响页面结构,也就是说脚本会延迟到整页面解析完毕再运行。...因此,建议异步脚本不要在加载期间修改 DOM。 异步脚本一定会在页面 load 事件之前执行,但可能会在 DOMContentLoaded 事件触发之前或之后执行。...可以理解为如果加了 async 属性就相当于单独开了一个进程去独立加载和执行,而 defer 是和 放到 body 底部一样的效果。 为验证我们设计测试代码如下: <!...放在 body 底部 放在 body 底部的时候,首屏出现的时间快了很多,大约在 500ms 左右,资源文件在 HTML 解析按顺序加载执行。

    5.1K60

    AngularDart4.0 指南- 表单 顶

    您在底部添加了一个提交按钮,其中有一些类用于样式。 你还没有使用Angular。 没有绑定或额外的指令,只是布局。...你知道如何从早期的页面做到这一点。 显示数据教导属性绑定。 用户输入显示如何使用事件绑定监听DOM事件以及如何使用显示的值更新组件属性。 现在您需要同时显示,聆听和提取。...临时另一个名为spy的模板引用变量添加到Name 标记,并使用它显示输入的CSS类。...如果需要,可以将相同类型的错误消息添加到中,但这不是必须的,因为选择框已经权限限制为有效值。...用ngSubmit提交表单 用户应该能够在填写表单提交这个表单。表单底部的Submit按钮本身不做任何事情,但是由于它的类型(type =“submit”),它会触发一个表单提交。

    17.5K30

    你也许不知道的浏览器的一些滚动行为

    动到底部 window.scrollTo({ left: 0, top: document.scrollingElement.scrollHeight }); // 如果你实在是懒的话......window.scrollTo(0, 999999); 注意:平滑滚动到顶部或者底部自己加参数或者属性即可✅ 3....判断浏览器已滚动到底部 window.addEventListener("scroll", () => { let { scrollTop, scrollHeight, clientHeight...滚动结束,强制滚动到指定元素 基于上面的例子,我们设置如下属性: ul { scroll-snap-type: x mandatory; li { scroll-snap-align...: start; } } 效果如下: 仔细看会发现,我们松手的时候,会将最近的元素动到最右边(初始位置,对于Y轴来讲就是顶部,X轴则是右边) 也可以设置出现在中间: li { scroll-snap-align

    3K20

    AngularDart4.0 指南- 显示数据 顶

    您可以通过HTML模板中的控件绑定到Angular组件的属性来显示数据。 在这个页面中,您将创建一个包含英雄列表的组件。 您将显示英雄名单的列表,并有条件地在列表下方显示一条消息。...Angular为列表中的每个项目复制,hero变量设置为当前迭代中的项目(英雄)。 Angular使用该变量作为双曲花括号内插的上下文。...Angular ngIf指令根据布尔条件插入或删除一个元素。...当组件的英雄列表中有三个以上的项目时,Angular会将该段落添加到DOM,并显示消息。 如果有三个或更少的项目,Angular会忽略该段落,所以不会显示任何消息。...有关更多信息,请参阅模板语法页面的模板表达式部分。 Angular没有显示和隐藏消息。 它正在添加和删除DOM中的段落元素

    5.3K10

    纯前端控件集 WijmoJS 2018V2发布,在React、Vue和Angular中更易用

    安装,它会在每个Angular 框架下的WijmoJS组件上方添加“Wijmo Designer ...”操作。单击操作按钮,它将打开一个设计界面,用于自定义该特定组件。...它允许控件添加到设计图面,然后根据自己的喜好自定义它们。配置完成,可以生成的代码复制到自己的应用程序中。...支持Angular 6和TypeScript 2.7 WijmoJS 已经全面支持Angular 6.0.0版。...目前所做的工作是所有Demo示例升级到Angular V6,并将WijmoJS 支持的TypeScript版本升级到V2.7。...WijmoJS Web组件允许用户以声明方式WijmoJS控件添加到HTML页面,并将其作为常用DOM元素进行操作,而无需使用任何其他框架。

    7K20

    AngularJS一些简单处理得到性能提升

    其实,ng只有在指定事件触发,才进入$digest cycle: DOM事件,譬如用户输入文本,点击按钮等。...若优化为ng-repeat="task in tasks track by task.idangular就能复用task对应的原DOM进行更新,减少不必要渲染。...我们都知道angular建议一个页面最多2000个双向绑定,但在列表页面通常很容易超标。 譬如一个滑动到底部加载下页的表格,一行20+个绑定, 展示个100行就超标了。...(不知道angular为何不考虑此类场景) 如下图,改为bindonce或angular-once减少了很多: update: 1.3.0b10开始支持内建单次绑定, {% raw %}{{:...除了directive外其他地方,特别是controller里面不要操作dom, 尤其是绑定到scope,便是灾难。 改变以前使用JQuery那样以DOM为中心的思维,拥抱以数据为中心的思维。

    1.7K20

    再谈angularJS数据绑定机制及背后原理—angularJS常见问题总结

    两者的区别在于页面没有加载完毕 {{val}} 会直接显示到页面,直到 Angular 渲染该绑定数据(这种行为有可能将 {{val}} 让用户看到);而 ng-bind 则是在 Angular 渲染完毕数据显示...结构创建好,然后整体添加到主文档中,这个DOM树的变更就会一次完成,性能会提高很多。...先解说下angular页面处理 ng对页面的处理过程: 浏览器把HTML字符串解析成DOM结构 ng把DOM结构给$compile,返回一个link函数 传入具体的scope调用这个link函数 得到处理的...编译服务主要是为指令编译DOM元素。 编译一段HTML字符串或者DOM的模板,产生一个scope和模板连接到一起的函数。...,返回编译好的jqLite对象,这时就可以直接添加到文档中了(也可以先添加到文档再编译)。

    7.8K40

    移动端吸顶fixbar解决方案

    需求背景 经常会有这样的需求,当页面动到某一个位置时,需要某个页面元素固定在屏幕顶部,并且有时需要连续滚动吸顶。...问题 position:fixed给移动端带来的问题: IOS8在页面滚动时,吸顶不连续;页面滑动时,不见吸顶,页面滚动停止,吸顶缓慢出现 滚动到顶部之后,会出现两个一样的吸顶, 过一会才恢复正常。...iPhone 4s&5 / iOS 6&7 / Safari 下,页面底部footer输入框失去焦点时,header定位出错。当页面有滚动动作时,header定位恢复正常。...2、sticky元素底部,不能和父级底部重叠。...(这条不好表述,文详细说明) 3、sticky元素的父级不能含有overflow:hidden 和 overflow:auto 属性 4、必须具有top,或 bottom 属性。

    3K30

    浅谈Angular

    它可通过 标签添加到HTML 页面。 AngularJS 通过 指令 扩展了 HTML,且通过 表达式 绑定数据到 HTML。...ng-show本质上设置元素的display值为none,只是设置样式,DOM结构还在,而*ngIf是真正意义上的从DOM结构中移除结构型指令 *ngIf--控制元素的显隐性 ?...ng-show本质上设置元素的display值为none,只是设置样式,DOM结构还在,而*ngIf是真正意义上的从DOM结构中移除 *ngFor--动态创建DOM结构 ngSwitch--通过匹配case...来控制元素的显隐 在自定义指令里获取指令添加到其上面的元素,需要依赖注入ElementRef服务 如果自定义指令想要接收从外部传入的值,需要使用@Input装饰器\....从Observable的中文名:”可观察的”就能看出,Observable的作用是可以起到类似监听的作用,但它的监听往往都是在跨页面中, 6.组件间通信: 1.父向子 -- @Input装饰器声明输入属性

    4.4K10
    领券