CSS修改浏览器默认滚动条

css修改默认滚动条代码

/*滚动条宽度*/
.box-wrap::-webkit-scrollbar {
     
  width: 4px;
}
/*滚动条里面小方块*/
.box-wrap::-webkit-scrollbar-thumb {
     
  border-radius: 5px;
  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  background: rgba(0, 0, 0, 0.2);
}
/*滚动条里面轨道*/
.box-wrap::-webkit-scrollbar-track {
     
  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  border-radius: 0;
  background: rgba(0, 0, 0, 0.1);
}

完整示例代码如下


<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Documenttitle>
    <style>
      .box-wrap {
      
        height: 300px;
        width: 300px;
        overflow: auto;
        border: solid 1px #595959;
      }
      .box-inner {
      
        height: 400px;
      }
      /*滚动条宽度*/
      .box-wrap::-webkit-scrollbar {
      
        width: 4px;
      }
      /*滚动条里面小方块*/
      .box-wrap::-webkit-scrollbar-thumb {
      
		  border-radius: 5px;
		  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
		  background: rgba(0, 0, 0, 0.2);
		}
		/*滚动条里面轨道*/
		.box-wrap::-webkit-scrollbar-track {
      
		  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
		  border-radius: 0;
		  background: rgba(0, 0, 0, 0.1);
		}
    style>
  head>
  <body>
    <div class="box-wrap">
      <div class="box-inner">
        容器内容容器内容容器内容容器内容容器内容容器内容
      div>
    div>
  body>
html>

修改后滚动条效果如下图所示
CSS修改浏览器默认滚动条_第1张图片

你可能感兴趣的:(css,css3,CSS修改浏览器默认滚动条)