本文介绍了如何在Angular项目中实现独立于内容的侧边栏和内容栏滚动条，仅在鼠标悬停时显示。通过使用CSS样式，作者展示了如何在鼠标进入或离开侧边栏和内容区时动态改变滚动条的可见性和样式。提供的代码示例包括Angular组件的逻辑和HTML模板，以及自定义滚动条的CSS样式。最后，文章附带了侧边栏和内容区滚动条的截图效果。
当一个页面超过屏幕高度的时候，一般会出现滚动条，粗粗的，看到这样的滚动条，各位小伙伴们有什么想法呢：
捕获.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模板：
顶部 放导航和右侧信息
修改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
1774
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
