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;
}
}