SOURCE

console 命令行工具 X clear

                    
>
console
<div class="scrollbar">
      <div class="content-list">
        <div>this is a item hahaha0</div>
        <div>this is a item hahaha1</div>
        <div>this is a item hahaha2</div>
        <div>this is a item hahaha3</div>
        <div>this is a item hahaha4</div>
        <div>this is a item hahaha5</div>
        <div>this is a item hahaha6</div>
        <div>this is a item hahaha7</div>
        <div>this is a item hahaha8</div>
        <div>this is a item hahaha9</div>
        <div>this is a item hahaha10</div>
        <div>this is a item hahaha11</div>
        <div>this is a item hahaha12</div>
        <div>this is a item hahaha13</div>
        <div>this is a item hahaha14</div>
        <div>this is a item hahaha15</div>
        <div>this is a item hahaha16</div>
        <div>this is a item hahaha17</div>
        <div>this is a item hahaha18</div>
        <div>this is a item hahaha19</div>
        <div>this is a item hahaha20</div>
      </div>
    </div>
.content-list {
  height: 80px;
  width: 165px;
  background: yellow;
  /* 这里设成auto/scroll的话,滚动条会占据列表的宽度,导致列表内容被挤压。 */
  /* 设成overlay的话滚动条会浮在内容是,不会被挤压。 */
  /* overflow: overlay; */
  overflow: hidden;
}
.content-list:hover{
  overflow-y: overlay;
}

.scrollbar::-webkit-scrollbar {
  -webkit-appearance: none;
  background: rgba(255,0,0,0);
  width: 8x;
  height: 8x;
}
.scrollbar::-webkit-scrollbar-thumb {
  background: rgba(255,0,0,0.6);
  width: 8x;
  display: none;
}
.scrollbar:hover::-webkit-scrollbar-thumb {
  display: block;
  width: 8x;
}
.scrollbar::-webkit-scrollbar-track {
  background-color: transparent;
  display: none;
}
.scrollbar:hover::-webkit-scrollbar-track {
  display: block;
}

.content-list > div {
  border-bottom: 1px solid;
}