css3控制滚动条样式 ::-webkit-scrollbar

css3控制滚动条样式  ::-webkit-scrollbar
  • 前言:

作为一个前端,在编辑页面的时候,有的时候遇到滚动条,会觉得浏览器自带的滚动条样式太丑,可能会与设计的美美的页面格格不入,但是滚动效果又必须存在。那么,这个时候就会想到要是能改变滚动条的样式,或者将滚动条隐藏掉更好一些。那么,怎样做到改变滚动条的样式呢?

这里介绍的是css3的一个样式,-webkit-scrollbar

webkit支持拥有overflow属性的区域,列表框,下拉菜单,textarea的滚动条自定义样式。但是因为他是css3样式,所有浏览器兼容性还是存在问题的。


  • 演示:

 css3滚动条样式demo:


  • 滚动条组成:

  • ::-webkit-scrollbar 滚动条整体部分

  • ::-webkit-scrollbar-thumb  滚动条里面的小方块,能向上向下移动(或往左往右移动,取决于是垂直滚动条还是水平滚动条)

  • ::-webkit-scrollbar-track  滚动条的轨道(里面装有Thumb)

  • ::-webkit-scrollbar-button 滚动条的轨道的两端按钮,允许通过点击微调小方块的位置。

  • ::-webkit-scrollbar-track-piece 内层轨道,滚动条中间部分(除去)

  • ::-webkit-scrollbar-corner 边角,即两个滚动条的交汇处

  • ::-webkit-resizer 两个滚动条的交汇处上用于通过拖动调整元素大小的小控件


  • 例如:

    隐藏滚动条:


   代码如下:

    

<style>

*{margin: 0;padding: 0;border: 0;outline: 0;background: transparent;}

.aa{width: 200px;max-height: 300px;background: transparent;overflow: hidden;position: relative;overflow-y:scroll!important}

.aa::-webkit-scrollbar {

    display: none;

}

.bb{height: 500px;}

span{margin-top: 400px;display: block;}

</style>


<div class="aa">

<div class="bb">

11

<span>22</span>

</div>

</div>


  • 详解

  1. /*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/  

  2. ::-webkit-scrollbar  

  3. {  

  4.     width16px;  

  5.     height16px;  

  6.     background-color#F5F5F5;  

  7. }  

  8.   

  9. /*定义滚动条轨道 内阴影+圆角*/  

  10. ::-webkit-scrollbar-track  

  11. {  

  12.     -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);  

  13.     border-radius: 10px;  

  14.     background-color#F5F5F5;  

  15. }  

  16.   

  17. /*定义滑块 内阴影+圆角*/  

  18. ::-webkit-scrollbar-thumb  

  19. {  

  20.     border-radius: 10px;  

  21.     -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);  

  22.     background-color#555;  

  23. }