How to realize the self-scrolling effect of table by Angular

This article mainly analyzes the relevant knowledge points of Angular how to achieve the table self-scrolling effect, the content is detailed and easy to understand, the operation details are reasonable, and has a certain reference value. If you are interested, you might as well follow the editor to have a look, and follow the editor to learn more about "Angular how to achieve table self-scrolling effect".

Table self-scrolling effect diagram

Realization principle

Principle: every scrolling is under the action of its setInterval () timer, DOM.scrollTop++ each time

Specific implementation:

1. The .html code is as follows: (here I use div to simulate as table)

Name Age Address {{I}} {{igh 10}} {{igh 100}

2. The .css code is as follows:

.Qbody {padding: 100px; / / header layer .tableTitleRow {display: flex; .tabletTitle {color: # ffffff; background-color: # 1e6fff; height: 64px; font-size: 16px; flex: 1; justify-content: flex-start; text-align: center; line-height: 64px; border: 1px solid # ccc }} / / content layer .parent {height: 380px; / / controls the height of the scroll bar margin: 0 auto; background: # 242424; overflow-y: scroll; .child {/ * the child box height is larger than the parent box, resulting in an overflow effect * / height: auto; div {.tableBodyRow {display: flex .tabletBody {background: # ffffff; font-size: 16px; flex: 1; justify-content: flex-start; text-align: center; line-height: 64px; border: 1px solid # ccc; div {line-height: 30px; border-top: 1px solid # ccc Border-bottom: 1px solid # ccc;}

3. The .js code is as follows:

NgOnInit (): void {var parent = document.getElementById ('parent'); / / get Dom var child1 = document.getElementById (' child1'); / / get Dom var child2 = document.getElementById ('child2'); / / get Dom child2 [XSS _ clean] = child1 [XSS _ clean]; this.mysetInterval=setInterval (function () {if ((parent.scrollTop++) = = (parent.scrollTop) & (parent.scrollTopclass0)) {parent.scrollTop = 0 } else {parent.scrollTop++;}}, 50) } mysetInterval// timer name ngOnDestroy () {/ / whenever Angular invokes and cleans clearInterval (this.mysetInterval) / / closes the loop before each destruction instruction / component} on "how to achieve table self-scrolling effect in Angular", this is the end of the introduction, more related content can be searched for previous articles, hope to help you answer questions, please support the website!