Angular2 scroll滾動條事件監聽多級聯動，scroll固定一列移動多列

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