案例

// html
<div class="tab-left">
  <div>111</div>
  <div>222</div>
  <div>333</div>
  <div>444</div>
</div>
// css
.tab-left{
  display:flex;
}
.tab-left:hover{
  overflow: scroll hidden;
}

CSS 滚动条样式

概念

::-webkit-scrollbar 滚动条整体部分
::-webkit-scrollbar-thumb 滚动条里面的小方块，能向上向下移动（或往左往右移动，取决于是垂直滚动条还是水平滚动条）
::-webkit-scrollbar-track 滚动条的轨道（里面装有Thumb）
::-webkit-scrollbar-button 滚动条的轨道的两端按钮，允许通过点击微调小方块的位置。
::-webkit-scrollbar-track-piece 内层轨道，滚动条中间部分（除去）
::-webkit-scrollbar-corner 边角，即两个滚动条的交汇处
::-webkit-resizer 两个滚动条的交汇处上用于通过拖动调整元素大小的小控件

示例

.tab-left::-webkit-scrollbar{
  width:10px;
  height:1px;
}
 .tab-left::-webkit-scrollbar-track{
  background: rgba(255,255,255,0.1);
  border-radius:2px;
}
.tab-left::-webkit-scrollbar-thumb{
  background: #bfbfbf;
  border-radius:10px;
}
.tab-left::-webkit-scrollbar-thumb:hover{
  background: #f5f5f5;
}
.tab-left::-webkit-scrollbar-corner{
  background: #179a16;
} 

分析

1. 设置滚动条的宽高。

横向滚动条可以使用 -webkit-scrollbar 设置高度 纵向滚动条可以使用 -webkit-scrollbar 设置宽度。

2. 控制滚动条的显示隐藏。

.tab-left:hover{
  overflow: scroll hidden;
}

当然控制显示隐藏 会暴露出一些问题 滚动条弹出时 内容会挤 布局会混乱 但是我看vscode的打开文件列表 做的挺友好的 待开发...

JS 滚动条位置 移动

监听盒子内的滚动条就需要监听盒子的dom了。

1. 获取dom

let Dom = document.getElementsByClassName('tab-left')[0]

2. 添加监听

Dom.addEventListener("scroll",  (e) => {
       // 获取横向移动的距离
       let left = e.target.scrollLeft;
       let Dom = document.getElementsByClassName('tab-left')[0];
       //获取需要滚动的盒子宽度
       let width = Dom.offsetWidth;
      },true)

3. 设置滚动条位置

// 移动到最左端
Dom.scrollLeft = 0
// 移动到最右端
let n1 = parseInt(dom.scrollLeft);    //外层容器的右移长度
let n2 = parseInt(dom.clientWidth);    //外层容器的宽度
let n3 = parseInt(dom.scrollWidth);    //外层容器实际宽度，当没有滚动条时与clientWidth相等
Dom.scrollLeft = n3 - n2