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

时间:2019-11-27
本文章向大家介绍上下滚动，头部固定，左右滚动，左侧边栏固定布局，主要包括上下滚动，头部固定，左右滚动，左侧边栏固定布局使用实例、应用技巧、基本知识点总结和需要注意事项，具有一定的参考价值，需要的朋友可以参考一下。

描述：

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

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

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

html文件：

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

<div class="wrap">
    <div class="header">
        <div class="header-content" id="header" [ngStyle]="{'margin-left':-leftPx+'px'}">
            <div class="box">1</div>
            <div class="box">2</div>
            <div class="box">3</div>
            <div class="box">4</div>
            <div class="box">5</div>
            <div class="box">6</div>
            <div class="box">7</div>
            <div class="box">8</div>
            <div class="box" style="margin-left:20px;"></div> <!--如果用方法2，当头部或是左边栏滚动到底部时，应该要把滚动条的宽度给加上，否则会有偏移-->
        </div>
    </div>
    <div class="body">
        <div class="left" id="left"  [ngStyle]="{'margin-top':-topPx+'px'}">
            <div class="box">1</div>
            <div class="box">2</div>
            <div class="box">3</div>
            <div class="box">4</div>
            <div class="box">5</div>
            <div class="box">6</div>
            <div class="box">7</div>
            <div class="box">8</div>
        </div>
        <div class="right" (scroll)="scrollDirect($event)">
            <div class="box">
                <div class="item">1</div>
                <div class="item">2</div>
                <div class="item">3</div>
                <div class="item">4</div>
                <div class="item">5</div>
                <div class="item">6</div>
                <div class="item">7</div>
                <div class="item">8</div>
            </div>
            <div class="box">
                <div class="item">1</div>
                <div class="item">2</div>
                <div class="item">3</div>
                <div class="item">4</div>
                <div class="item">5</div>
                <div class="item">6</div>
                <div class="item">7</div>
                <div class="item">8</div>
            </div>
            <div class="box">
                <div class="item">1</div>
                <div class="item">2</div>
                <div class="item">3</div>
                <div class="item">4</div>
                <div class="item">5</div>
                <div class="item">6</div>
                <div class="item">7</div>
                <div class="item">8</div>
            </div>
            <div class="box">
                <div class="item">1</div>
                <div class="item">2</div>
                <div class="item">3</div>
                <div class="item">4</div>
                <div class="item">5</div>
                <div class="item">6</div>
                <div class="item">7</div>
                <div class="item">8</div>
            </div>
            <div class="box">
                <div class="item">1</div>
                <div class="item">2</div>
                <div class="item">3</div>
                <div class="item">4</div>
                <div class="item">5</div>
                <div class="item">6</div>
                <div class="item">7</div>
                <div class="item">8</div>
            </div>
            <div class="box">
                <div class="item">1</div>
                <div class="item">2</div>
                <div class="item">3</div>
                <div class="item">4</div>
                <div class="item">5</div>
                <div class="item">6</div>
                <div class="item">7</div>
                <div class="item">8</div>
            </div>
            <div class="box">
                <div class="item">1</div>
                <div class="item">2</div>
                <div class="item">3</div>
                <div class="item">4</div>
                <div class="item">5</div>
                <div class="item">6</div>
                <div class="item">7</div>
                <div class="item">8</div>
            </div>
            <div class="box">
                <div class="item">1</div>
                <div class="item">2</div>
                <div class="item">3</div>
                <div class="item">4</div>
                <div class="item">5</div>
                <div class="item">6</div>
                <div class="item">7</div>
                <div class="item">8</div>
            </div>
        </div>
    </div>
</div>

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

原文地址：https://www.cnblogs.com/myyouzi/p/11944710.html

随机文章
本站知识点必读
最近更新