当前位置：网站首页>修改滚动条样式

修改滚动条样式

2022-07-17 05:25:00 【guizi0809】

出现滚动条的条件

父元素固定宽高(或者设置max-height,max-width)
子元素超过父元素固定的宽高，或者超过父元素设置的最大宽度/最大高度
父元素设置overflow: auto

注：overflow: auto 其实为overflow-x: auto 和overflow-y: auto的简写形式

可对x轴滚动条和y轴滚动条显示情况单独设置

参数	描述
auto	不超过宽度或高度时则不显示滚动条，超过宽度或高度时自动显示滚动条
hidden	不管有没有超过宽度或高度，不显示滚动条（隐藏滚动条）
scroll	不管有没有超过宽度或高度，必定显示滚动条

在这里插入图片描述

修改滚动条样式

默认的滚动条样式有点丑，可以使用css对滚动条的样式进行设置（滚动条在父元素上），可设置的滚动条伪元素如下：

滚动条伪元素	描述
::-webkit-scrollbar	整个滚动条
::-webkit-scrollbar-thumb	滚动条上的滚动滑块
::-webkit-scrollbar-track	滚动条轨道
::-webkit-scrollbar-track-piece	滚动条没有滑块的轨道部分
::-webkit-scrollbar-button	滚动条上的按钮 (上下箭头)
::-webkit-scrollbar-corner	当同时有垂直滚动条和水平滚动条时交汇的部分
::-webkit-resizer	某些元素的`corner`部分的部分样式(例:`textarea`的可拖动按钮)
::-webkit-scrollbar-button:horizontal:single-button:start	水平滚动条左边按钮
::-webkit-scrollbar-button:horizontal:single-button:end	水平滚动条右边按钮
::-webkit-scrollbar-button:vertical:single-button:start	垂直滚动条上边按钮
::-webkit-scrollbar-button:vertical:single-button:end	垂直滚动条下边按钮

简单示例：

  /*outer-box为父元素*/
	
  /*滚动条整体样式 此时为Y轴滚动，设置宽度，当为X轴滚动时，则设置高度*/
  .outer-box::-webkit-scrollbar {
    
    width: 8px;  
  }
  /*滚动条里面的滑块*/
  .outer-box::-webkit-scrollbar-thumb {
    
    border-radius: 2px;
    background: #d5d5d5;
  }
  /*滚动条轨迹*/
  .outer-box::-webkit-scrollbar-track {
    
    border-radius: 2px;
    background: #f1f1f1;
  }