当一个页面超过屏幕高度的时候，一般会出现滚动条，粗粗的，看到这样的滚动条，各位小伙伴们有什么想法呢：
捕获.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
