添加滚动条并统一修改样式

一、添加滚动条 并 修改样式

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    div {
      width: 200px;
      /* 100vh 指的是100%但是没有子盒子也能撑起高度*/
      height: 100vh;
      background-color: grey;

      /*超过最大的高度就在右侧出现滚轮*/
      max-height: 400px;
      overflow-y: scroll;
      z-index: 999;
    }

　　 /* =========================== */
    /* 滚动条样式 wyz*/
    ::-webkit-scrollbar {
      /*滚动条整体样式*/
      width: 12px;
      /*高宽分别对应横竖滚动条的尺寸*/
      height: 12px;
    }

    ::-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);
    }

    ::-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></div>

</body>

</html>

 

二、具体的样式

 

 

 

 

 

　　

posted @ 2020-04-28 11:03  葡萄想柠檬  Views(374)  Comments(0)  Edit  收藏  举报
目录代码