angular——侧边导航栏随窗口滚动切换选中，点击对应内容元素滚动到浏览器窗口的可视区域内

html

<div class="content">
			<div class="left">
				<div class="navLi" *ngFor="let item of navList;let idx = index" [ngClass]="{'active':num==idx}" (click)="navClick(idx)">
				   {{item.navName}}
				</div>
			</div>
			<div class="right" id='contScroll'>
				<div id="div0" style="background: red;height: 300px;">
					content1
				</div>
				<div id="div1" style="background: green;height: 300px;">
					content2
				</div>
				<div id="div2" style="background: orchid;height: 300px;">
					content3
				</div>
				<div id="div3" style="background: orange;height: 300px;">
					content4
			    </div>
	        </div>
</div>

ts

num = 0;
clicked = false;
navList = [
    {
      navName: "导航一",
    },
    {
      navName: "导航二",
    },
    {
      navName: "导航三",   
    },
    {
      navName: "导航四",
    }
];
ngOnInit(){
    const _scroll = document.querySelector("#contScroll");
    fromEvent(_scroll, "scroll").subscribe((event) => {
      this.onWindowScroll(event); //调用
    });
}

onWindowScroll(e){
    let scrollTop =
      e.target.scrollTop ||
      window.pageYOffset ||
      document.documentElement.scrollTop ||
      document.body.scrollTop; // 滚动条偏移量

    if (this.clicked) {
      this.clicked = false;
      return;
    }
    let num = this.navList.length;
    for (let n = 0; n < num; n++) {
      if (document.getElementById("div" + n).offsetTop < scrollTop) {
        this.num = n;
      }
    }
}


navClick(index) {
    this.num = index;
    var element = document.getElementById(`div${index}`);
    // 让id为content${index}的元素滚动到浏览器窗口的可视区域内 { behavior: "smooth" }
    element.scrollIntoView();
    this.clicked = true;
  }

style

.content{
    margin: 0;
	padding: 0;
	width: 100%;
	position: fixed;
	.left{
	    flex: 0 0 200px;
				
	}
    .navLi{
        height: 50px;
        text-align: center;
        line-height: 50px;
        border-bottom: 1px solid #f0f0f0;  
        cursor: pointer;   
      }
    .active{
        background: #9ac3f2;
        color: #fff;
      }
    .right{
		flex: 1;
	}
}