首页
学习
活动
专区
工具
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.7K61

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滚动穿透的触发条件 一次没有抬起的滚动行为...(手没有离开屏幕)导致元素滚动到顶部或者 底部之后,如果手还在屏幕上往两端滑,并不会触发滚动穿透 如果你把元素滚动到 两端不可滚之后,抬起手,再按下去,往不可滚的方向移动,此时才会发生 滚动穿透 之前我们说了

    6.2K20

    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" 添加到你要施加样式的元素上就可以了。

    4K30

    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 底部的时候,首屏出现的时间快了很多,大约在 500ms 左右,资源文件在 HTML 解析后按顺序加载执行。

    5.2K60

    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

    3.1K20

    纯前端控件集 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

    AngularDart4.0 指南- 显示数据 顶

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

    5.3K10

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

    其实,ng只有在指定事件触发后,才进入$digest cycle: DOM事件,譬如用户输入文本,点击按钮等。...若优化为ng-repeat="task in tasks track by task.id后,angular就能复用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.9K40

    移动端吸顶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
    领券