当一个页面超过屏幕高度的时候，一般会出现滚动条，粗粗的，看到这样的滚动条，各位小伙伴们有什么想法呢：
捕获.PNG
也许是时候我们自定义滚动条了，除了自定义样式，我们假设您的页面是分为侧边栏和内容栏的，其中侧边栏在左边，内容栏在右边，它们可以独立出现滚动条，相互独立的滚动，并且只有当鼠标hover到该区域，该区域才会出现滚动条。
具体的思路就是鼠标进入或者离开该区域，给html相关tag加上不同的css样式，该样式主要是滚动条样式。
好的，一如既往，我们直接开始吧。
首先就是Angular项目的创建啦。。。啦啦啦，我创建好了。
我们就在appComponent这个组件上写独立滚动条的页面。
AppComponent：
import {Component, OnInit} from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './ponent.html',
styleUrls: ['./ponent.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模板：
顶部 放导航和右侧信息
修改index.html的样式：
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
