上下滚动，头部固定，左右滚动，左侧边栏固定布局

描述：

上下滚动滚动条时，头部导航固定，左边栏随之移动；左右滚动滚动条时，左边栏固定，头部导航随之移动。这里有两种方式，都是给滚动的元素增加滚动事件scroll去实现：

• 改变元素css
• 改变元素的scrollTop或scrollLeft属性

下面直接上代码（两种方法合在一起了）

html文件：

说明：红色部分为方法1，蓝色部分为方法2

    

        
id="header" [ngStyle]="{'margin-left':-leftPx+'px'}">
            
1
            
2
            
3
            
4
            
5
            
6
            
7
            
8
            
 
        
    
    

        
id="left"  [ngStyle]="{'margin-top':-topPx+'px'}">
            
1
            
2
            
3
            
4
            
5
            
6
            
7
            
8
        
        

            

                
1
                
2
                
3
                
4
                
5
                
6
                
7
                
8
            
            

                
1
                
2
                
3
                
4
                
5
                
6
                
7
                
8
            
            

                
1
                
2
                
3
                
4
                
5
                
6
                
7
                
8
            
            

                
1
                
2
                
3
                
4
                
5
                
6
                
7
                
8
            
            

                
1
                
2
                
3
                
4
                
5
                
6
                
7
                
8
            
            

                
1
                
2
                
3
                
4
                
5
                
6
                
7
                
8
            
            

                
1
                
2
                
3
                
4
                
5
                
6
                
7
                
8
            
            

                
1
                
2
                
3
                
4
                
5
                
6
                
7
                
8
            
        
    

scss文件：

.flex-box{
    display:flex;
    display: -webkit-flex;
    flex-direction:row;
    flex-wrap:nowrap;
}
.wrap{    
    .header{
        margin-left:200px; 
        margin-bottom:10px;
        overflow:hidden;
        .header-content{                       
            overflow:hidden;
            @extend .flex-box;
            .box{
                flex-shrink: 0;
                margin-right:10px;
                width:300px;
                height:50px;
                background:#f5f5f5;
            }
        }
    }
    .body{
        display:flex;
        display: -webkit-flex;
        height: calc(100vh - 250px);
        overflow:hidden;
        .left{
            padding-right:10px;
            padding-bottom:20px;
            width:200px;
            overflow:hidden;
            .box{
                margin-bottom:10px;
                height:200px;
                background:#f5f5f5;
            }
        }
        .right{
            flex: 1;
            overflow:auto;            
            .box{
                margin-bottom:10px;
                @extend .flex-box;
                div{
                    flex-shrink: 0;
                    margin-right:10px;
                    width:300px;
                    height:200px;
                    background:#f5f5f5;
                }
            }
        }
    }
}

ts文件：

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-interview-list',
  templateUrl: './interview-list.component.html',
  styleUrls: ['./interview-list.component.scss']
})
export class InterviewListComponent implements OnInit {
  leftPx;
  topPx;
  constructor() { }

  ngOnInit() {
  }
  scrollDirect(e){
　　//方法1
    this.leftPx = e.target.scrollLeft;
    this.topPx = e.target.scrollTop;
　　//方法2
    document.getElementById('header').scrollLeft = e.target.scrollLeft;
    document.getElementById('left').scrollTop = e.target.scrollTop;
  }
}