zoukankan      html  css  js  c++  java
  • 上下滚动,头部固定,左右滚动,左侧边栏固定布局

    描述:

    上下滚动滚动条时,头部导航固定,左边栏随之移动;左右滚动滚动条时,左边栏固定,头部导航随之移动。这里有两种方式,都是给滚动的元素增加滚动事件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;
                    300px;
                    height:50px;
                    background:#f5f5f5;
                }
            }
        }
        .body{
            display:flex;
            display: -webkit-flex;
            height: calc(100vh - 250px);
            overflow:hidden;
            .left{
                padding-right:10px;
                padding-bottom:20px;
                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;
                        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; } }
  • 相关阅读:
    codeforces 455B A Lot of Games(博弈,字典树)
    HDU 4825 Xor Sum(二进制的字典树,数组模拟)
    hdu 1800 Flying to the Mars(简单模拟,string,字符串)
    codeforces 425A Sereja and Swaps(模拟,vector,枚举区间)
    codeforces 425B Sereja and Table(状态压缩,也可以数组模拟)
    HDU 4148 Length of S(n)(字符串)
    codeforces 439D Devu and Partitioning of the Array(有深度的模拟)
    浅谈sass
    京东楼层案例思维逻辑分析
    浅谈localStorage和sessionStorage
  • 原文地址:https://www.cnblogs.com/myyouzi/p/11944710.html
Copyright © 2011-2022 走看看