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模板：

  
  

    

      顶部 放导航和右侧信息
    
  
  
  
  

    
    

      

        

          
        
      
    
    
    
    

      

        

          
        
      
    
    
  
  

修改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