當(dāng)一個(gè)頁(yè)面超過屏幕高度的時(shí)候距贷，一般會(huì)出現(xiàn)滾動(dòng)條柄冲，粗粗的，看到這樣的滾動(dòng)條储耐，各位小伙伴們有什么想法呢：
捕獲.PNG
也許是時(shí)候我們自定義滾動(dòng)條了，除了自定義樣式滨溉，我們假設(shè)您的頁(yè)面是分為側(cè)邊欄和內(nèi)容欄的什湘，其中側(cè)邊欄在左邊，內(nèi)容欄在右邊晦攒，它們可以獨(dú)立出現(xiàn)滾動(dòng)條闽撤，相互獨(dú)立的滾動(dòng)，并且只有當(dāng)鼠標(biāo)hover到該區(qū)域脯颜，該區(qū)域才會(huì)出現(xiàn)滾動(dòng)條哟旗。
具體的思路就是鼠標(biāo)進(jìn)入或者離開該區(qū)域，給html相關(guān)tag加上不同的css樣式栋操，該樣式主要是滾動(dòng)條樣式闸餐。
好的，一如既往矾芙，我們直接開始吧舍沙。
首先就是Angular項(xiàng)目的創(chuàng)建啦。剔宪。拂铡。啦啦啦，我創(chuàng)建好了葱绒。
我們就在appComponent這個(gè)組件上寫?yīng)毩L動(dòng)條的頁(yè)面感帅。
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; // 是否顯示側(cè)邊欄滾動(dòng)條
showContentScroll = false; // 是否顯示內(nèi)容區(qū)滾動(dòng)條
constructor() { }
ngOnInit() {
}
mouseEnterSideBar(e) {// 鼠標(biāo)進(jìn)入側(cè)邊欄，執(zhí)行的函數(shù)
this.showSideBarScroll = true;
}
mouseLeaveSideBar(e) {// 鼠標(biāo)離開側(cè)邊欄地淀，執(zhí)行的函數(shù)
this.showSideBarScroll = false;
}
mouseEnterContent(e) {// 鼠標(biāo)進(jìn)入內(nèi)容區(qū)失球，執(zhí)行的函數(shù)
this.showContentScroll = true;
}
mouseLeaveContent(e) {// 鼠標(biāo)離開內(nèi)容區(qū)，執(zhí)行的函數(shù)
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="">
頂部 放導(dǎo)航和右側(cè)信息
</div>
</div>
<!--頂部 end-->
<!--側(cè)邊欄和內(nèi)容 begin-->
<div style="display:flex;height:calc(100% - 64px);overflow-y: hidden;overflow-x: hidden;width: 100%;">
<!--側(cè)邊欄 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>
<!--側(cè)邊欄 end-->
<!--內(nèi)容 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>
<!--內(nèi)容 end-->
</div>
<!--側(cè)邊欄和內(nèi)容 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;
}
效果圖：
側(cè)邊欄滾動(dòng).png
內(nèi)容區(qū)滾動(dòng).png
