目录
设置滚动条
滚动条样式
1、隐藏滚动条
2、常用滚动条的样式的示例
滚动条的应用
1、标签页的内容滚动，标签头部固定
2、鼠标移入显示滚动条，鼠标移出隐藏滚动条
3、实现导航栏鼠标上滑显示下滑隐藏
4、表格中的滚动条（空白处理）
这篇文章看完如果您觉得有所收获，认为还行的话，就点个赞收藏一下呗
设置滚动条
可以使用overflow属性设置是否出现滚动条。
同时需要指定盒子高度或宽度，当超出指定尺寸时，就会出现滚动条
x、y方向：overflow：scroll
x方向：overflow-x：scroll
y方向：overflow-y：scroll
.box {height: 500px;overflow: hidden;// 超出部分隐藏overflow-y: scroll; // 设置y轴方向的滚动条}
滚动条样式
::-webkit-scrollbar 滚动条整体部分
::-webkit-scrollbar-button 滚动条两端的按钮
::-webkit-scrollbar-track 外层轨道
::-webkit-scrollbar-track-piece 内层轨道，滚动条中间部分（除去）
::-webkit-scrollbar-thumb 滚动条里面可以拖动的那个
::-webkit-scrollbar-corner 边角
::-webkit-resizer 定义右下角拖动块的样式
1、隐藏滚动条
// 隐藏滚动条.el-tab-pane::-webkit-scrollbar {width: 0 !important;height: 0px !important;}
2、常用滚动条的样式的示例
.box {padding: 30px 20px 30px 50px;height: 500px;overflow: hidden;white-space: nowrapoverflow-y: scroll;// 设置滚动条/*定义滚动条宽高及背景，宽高分别对应横竖滚动条的尺寸*/// 滚动条整体部分&::-webkit-scrollbar {width: 6px;height: 6px;}// 滚动条的轨道的两端按钮，允许通过点击微调小方块的位置。&::-webkit-scrollbar-button {display: none;}// 滚动条里面的小方块，能向上向下移动（或往左往右移动，取决于是垂直滚动条还是水平滚动条）&::-webkit-scrollbar-thumb {background: rgba(144, 147, 153, 0.3);cursor: pointer;border-radius: 4px;}// 边角，即两个滚动条的交汇处&::-webkit-scrollbar-corner {display: none;}// 两个滚动条的交汇处上用于通过拖动调整元素大小的小控件&::-webkit-resizer {display: none;}}
滚动条的应用
1、标签页的内容滚动，标签头部固定
只要修改css样式：给元素添加高度和overflow：auto或给父元素添加即可
子盒子的高度需要根据屏幕自适应
<template><div class="app-container"><el-tabs v-model="activeName"><el-tab-pane label="用户管理" name="first">用户管理</el-tab-pane><el-tab-pane label="配置管理" name="second">配置管理</el-tab-pane><el-tab-pane label="角色管理" name="third">角色管理</el-tab-pane></el-tabs></div></template><style lang='scss' scoped>.el-tab-pane {height: 500px;overflow-y: auto;}</style>
2、鼠标移入显示滚动条，鼠标移出隐藏滚动条
<div class="table"></div><style lang='scss' scoped>.table {height: 700px;overflow: hidden;}.table:hover {height: 700px;overflow-y: auto;}</style>
3、实现导航栏鼠标上滑显示下滑隐藏
首先我们要在DOM加载完毕之后获取滚轮事件，把滚轮位置赋值给data中的top变量，用watch监听top的newValue和oldValue值，当新值比旧值大的时候证明滚轮在向下滚动，触发相对应事件，反之亦然。
<!-- 第一步 --><navbar id="nav-bar" :class="navShow ? 'navOn' : 'navOff'" /><script>//第三步： 获取浏览器滚轮mounted () {window.addEventListener('scroll', () => {this.top = document.documentElement.scrollTop || document.body.scrollTop || window.pageYOffset})},//第四步： 监听top值的变化watch: {top (newValue, oldValue) {// 等新值大于100的时候再做变化（优化一下）if (newValue > 100) {if (newValue > oldValue) {this.navShow = falseconsole.log('向下滚动')} else {this.navShow = trueconsole.log('向上滚动')}}}},data () {return {// 第二步top: '',navShow: true,}},}</script><style lang="scss" scoped>// 第五步.navOn {position: fixed;top: 0;left: 0;right: 0;transition: all 0.2s ease-in-out 0.2s;transform: translateZ(0);z-index: 9;}.navOff {position: fixed;top: 0;left: 0;right: 0;transition: all 0.2s ease-in-out 0.2s;transform: translate3d(0, -100%, 0);z-index: 9;}</style>
4、表格中的滚动条（空白处理）
//滚动条空白//表头.el-table--border th:last-child {border-right: none;}.el-table__fixed-right-patch {// background-color: #152345 !important; //如果表头有背景色，在这里添加即可}//表格内容处.el-table td:last-child {border-right: none;}
最后的效果就是这样啦，没有什么特别好的方法，如果你有的话留言一下呗。
