目錄

• 表格自滾動效果圖
• 實現原理
• 具體實現：

表格自滾動效果圖

實現原理

原理：每一次的滾動都是在其setInterval（）定時器的作用下，每次將DOM.scrollTop++

具體實現：

1、 .html 程式碼如下：（這裡我使用div模客棧擬成table）

<div style="padding: 100px;">
    <div class="tableTitleRow">
        <div class="tabletTitle">Name</div>
        <div class="tabletTitle">Age</div>
        <div class="tabletTitle">Address</div>
    </div>
    <div id="parent" class="parent">
        <div id="child1" class="child">
            <div *ngFor="let data of listOfData;index as i">
                <div class="tableBodyRow">
                    <div class="tabletBody"&程式設計客棧
 
gt;{{i}}</div>
                    <div class="tabletBody">{{i+10}}</div>
                    <div class="tabletBody">{{i+100}}</div>
                </div>
            </div>
        </div>
        <div id="child2" class="child"></div>
    </div>
</div>

2、 . 程式碼如下:

.Qbody {
 padding: 100px;
 // 表頭層
 .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;
  }
 }
 //內容層
 .parent {
  height: 380px; //控制多高處出現滾動條
  margin: 0 auto;
  background: #242424;
  overflow-y: scroll;
  .child {
   /*設定的子盒子高度大於父盒子，產生溢位效果*/
   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、 . 程式碼如下：

 ngOnInit(): void {
    var parent = document.getElementById('parent');//獲取Dom
    var child1 = document.getElementById('child1');//獲取Dom
    var child2 = document.getElementById('child2');//獲取Dom
    child2.innerHTML = child1.innerHTML;
    this.mysetInterval=setInterval(function () {
       if((parent.scrollTop++) == (parent.scrollTop)&&(parent.scrollTop!=0)) {
           parent.scrollTop = 0;
       } else {
           parent程式設計客棧.scrollTop++;
       }
    },50);
  }
  mysetInterval//定時器名字
  ngOnDestroy() {//每當 Angular 每次銷燬指令/元件之前呼叫並清掃
    clearInterval(this.mysetInterval)//關閉迴圈
  }

到此這篇關於Angular實現表格自滾動效果的文章就介紹到這了,更多相關Angular表格自滾動內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！