2019-09-28/自定义滚动条&Angular

当一个页面超过屏幕高度的时候，一般会出现滚动条，粗粗的，看到这样的滚动条，各位小伙伴们有什么想法呢：

捕获.PNG

也许是时候我们自定义滚动条了，除了自定义样式，我们假设您的页面是分为侧边栏和内容栏的，其中侧边栏在左边，内容栏在右边，它们可以独立出现滚动条，相互独立的滚动，并且只有当鼠标hover到该区域，该区域才会出现滚动条。
具体的思路就是鼠标进入或者离开该区域，给html相关tag加上不同的css样式，该样式主要是滚动条样式。
好的，一如既往，我们直接开始吧。
首先就是Angular项目的创建啦。。。啦啦啦，我创建好了。
我们就在appComponent这个组件上写独立滚动条的页面。
AppComponent：

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {

  showSideBarScroll = false; // 是否显示侧边栏滚动条

  showContentScroll = false; // 是否显示内容区滚动条

  constructor() { }

  ngOnInit() {
  }

  mouseEnterSideBar(e) {// 鼠标进入侧边栏，执行的函数
    this.showSideBarScroll = true;
  }

  mouseLeaveSideBar(e) {// 鼠标离开侧边栏，执行的函数
    this.showSideBarScroll = false;
  }

  mouseEnterContent(e) {// 鼠标进入内容区，执行的函数
    this.showContentScroll = true;
  }

  mouseLeaveContent(e) {// 鼠标离开内容区，执行的函数
    this.showContentScroll = false;
  }
}

html模板：

<div style="display:flex;flex-wrap:wrap;width:100%;height:100%;">
  <!--顶部 begin-->
  <div style="display:flex;align-items:center;height:64px;background-color: aqua;width: 100%;">
    <div style="">
      顶部 放导航和右侧信息
    </div>
  </div>
  <!--顶部 end-->
  <!--侧边栏和内容  begin-->
  <div style="display:flex;height:calc(100% - 64px);overflow-y: hidden;overflow-x: hidden;width: 100%;">
    <!--侧边栏 begin-->
    <div style="display:flex;width:20%;" (mouseenter) ="mouseEnterSideBar($event) " (mouseleave) ="mouseLeaveSideBar($event)" [class.scroll-show]="showSideBarScroll" [class.scroll-hide]="!showSideBarScroll">
      <div style="justify-content:flex-start;">
        <div style="background-color: #fff;height:1000px;">
          <app-menu-tree></app-menu-tree>
        </div>
      </div>
    </div>
    <!--侧边栏 end-->
    <!--内容 begin-->
    <div style="display:flex;width:80%;" (mouseenter) ="mouseEnterContent($event) " (mouseleave) ="mouseLeaveContent($event)" [class.scroll-show]="showContentScroll" [class.scroll-hide]="!showContentScroll">
      <div style="justify-content:center;">
        <div style="height:1000px;">
          <router-outlet></router-outlet>
        </div>
      </div>
    </div>
    <!--内容 end-->
  </div>
  <!--侧边栏和内容  end-->
</div>

修改index.html的样式：

<app-root style="display:flex;width:100%;height: 100%;"></app-root>

css:

.scroll-show{
  overflow-y: scroll;
}

.scroll-show::-webkit-scrollbar {
  width: 5px;
  background: transparent;
}

.scroll-show::-webkit-scrollbar-track {
  width: 5px;
  background: transparent;
}

.scroll-show::-webkit-scrollbar-thumb {
  width: 5px;
  height: 30px;
  border-radius: 3.5px;
  background-color: #D8D8D8;
}

.scroll-hide{
  overflow-y: scroll;
}

.scroll-hide::-webkit-scrollbar {
  width: 5px;
  background: transparent;
}

.scroll-hide::-webkit-scrollbar-track {
  width: 5px;
  background: transparent;
}

.scroll-hide::-webkit-scrollbar-thumb {
  width: 5px;
  height: 30px;
  border-radius: 3.5px;
  background:transparent;
}

效果图：

侧边栏滚动.png 内容区滚动.png