scroll绑定div实现固定一列和移动多列
最左边顶部是固定的,右上角可以左右滚动,左下角可以上下滚动,右下角是上下左右都可以滚动。
多级联动是指:右下角区块向左或右移动,右上角区块跟着移动,向上或向下移动时,左下角区块也跟着移动,右上角和左下角移动时互斥的。
<!--html--><div class="container"><div class="top"><div class="leftTop">leftTop</div><div id="head" class="rightTop" (scroll)="noscroll($event)" *ngFor="let data of datas">{{data}}</div></div><div class="bottom"><div id="left" class="leftBottom" (scroll)="noscroll($event)" *ngFor="let data of datas">{{data}}</div><div id="right" class="rightBottom" (scroll)="scroll($event)" *ngFor="let data of datas">{{data}}</div></div></div>----------**TS文件**public scroll(event){console.log(event);document.getElementById("head")._scrollContent.nativeElement.scrollLeft = document.getElementById("right")._scrollContent.nativeElement.scrollLeft;document.getElementById("left")._scrollContent.nativeElement.scrollTop = document.getElementById("right")._scrollContent.nativeElement.scrollTop;}//移动右边时固定左边和上边public noscroll(event){console.log(event);document.getElementById("right")._scrollContent.nativeElement.scrollLeft = document.getElementById("head")._scrollContent.nativeElement.scrollLeft;document.getElementById("right")._scrollContent.nativeElement.scrollTop = document.getElementById("left")._scrollContent.nativeElement.scrollTop;}