angular 实现无缝滚动

  constructor(
    private api: ApiService,
    private renderer: Renderer2,//订阅angular这个服务
  ) { }  

 
  //页面向上滚动
  
//页面向上滚动
  offset() {
    let arr = this.noticeList //数据数组
    let dom: any = document.getElementsByClassName('tbody1')[0] //获取dom元素
    let h = dom.offsetHeight//获取dom元素的高度
    if (h) {
      this.noticeList = [...this.noticeList, ...arr]  //复制1份数据
      let offsetnum = this.noticeList.length//设置滚动最低数量
      this.domspeed = 14 / h //设置速度的参数 通过一个值除高度获得一个参数值 
      let hPrecent = 50  // 设置50百分比
      let n = 0//目前移动的点

      //防止面板数据只有1条 
      for (let i = 1; i <= offsetnum; i++) {
        if (this.noticeList.length < offsetnum) {
          this.noticeList = [...this.noticeList, ...arr]
        } else {
          i = offsetnum + 1
        }
      }
      this.Interval = setInterval(() => {
        if (n > hPrecent) {
          n = 0
          if (this.noticeList.length < offsetnum) {//防止数据少于
            this.noticeList = [...this.noticeList, ...arr]
          }
        }
        console.log(n);
        console.log(hPrecent);
        console.log(this.noticeList);

        n += this.domspeed
        this.renderer.setStyle(dom, 'transform', `translateY(-${n}%)`); //通过transform的translateY往上移动
      }, 10);

    }

  }

html

<div class="box" >
  <div style="overflow: hidden">
    <table border="0" cellspacing="0" cellpadding="0">
      <thead id="thead1" class="thead1" style="max-height: 50%; overflow: hidden;">
        <tr style="background-color: #012593;">
<td>{{item}}</td>
        </tr>
      </thead>
    </table>
  </div>
  <div style=" overflow: hidden">
    <table border="0" cellspacing="0" cellpadding="0">
      <tbody class="tbody1" style="max-height: 50%; overflow: hidden;">
        <tr *ngFor="let item of emparr; let i=index" [style]="item.q==1? bgc:''">
<td>{{item}}</td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

css

.thead1 {
  tr>th {
    width: 260px;
    padding: 10px 0px;
  }
}

.tbody1 {
  height: 80px;

  tr>td {
    width: 260px;
    text-align: center;
    padding: 12px 6px;
  }
}

.box {
  height: 380px;//设置一个盒子把两个table放里面
  overflow: hidden;
  text-overflow: ellipsis;
  color: white;
}
//两个table的th 和td 的宽设置一样