---

一、虛擬滾動

  <!-- itemSize相當于每個項目的高度為30px --><!-- 需要給虛擬滾動設置寬高，否則無法正常顯示 --> 
<cdk-virtual-scroll-viewport [itemSize]="40" class="view_scroll"><div class="main"><divclass="item"*cdkVirtualFor="let item of selectIfy.list; let i = index"[class.active]="i === selectIfy.selectedIndex"(click)="selectIfy.onChangeIndex(i)">{{ i + 1 }}.{{ item.label }}</div></div></cdk-virtual-scroll-viewport>

$height: 40px;
.main {width: 100%;height: 100%;display: flex;flex-direction: column;.item {padding: 0 10px;width: 100%;height: $height;line-height: $height;cursor: pointer;position: relative;&.active {background-color: #e6f7ff;color: #1890ff;position: sticky;//設置為固定top: 0;//需設置才能生效z-index: 999;//防止被其他項覆蓋&::before {content: '';display: inline-block;position: absolute;top: 0;left: 0;width: 3px;height: $height;background-color: #1890ff;}}}
}

 selectIfy = {selectedIndex: 0,onChangeIndex: index => {this.selectIfy.selectedIndex = index;},list: [{ label: '項目1', value: 0 },{ label: '項目2', value: 1 },{ label: '項目3', value: 2 },{ label: '項目4', value: 3 }]};