Shulou(Shulou.com)06/02 Report--

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!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.