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