SOURCE

let strval=[111,222,333,444,555,666,777,888,999,101010]


let str=""
for(let i=0;i<100;i++){
   var randomColor = Math.floor(Math.random()*16777215).toString(16);
    if((''+randomColor).length<6) {
        randomColor=randomColor+'0';
    }
    let aaa='#'+randomColor
 str+='<span style="background-color:'+aaa+'" class="spanval">'+(i+1)+'</span> <br/>'
 }

let tab=document.getElementById("valid")
let srchtml=tab.innerHTML;
tab.innerHTML=srchtml+str;

<div class="left-div">
    <div id="valid" class="box">
    <span></span>
    </div>
</div>

.left-div {
    width: 90%;
    max-width: 300px;
    max-height: 80vh;
    padding: 2em;
    overflow: auto;
    
 }
 .box{
     height: 800px
 }
 .spanval{
     height: 20px;
     display: inline-block;
     width: 90%;
     margin: 10px 0;
     padding: 5px 0;
     text-align: center;
     color: #fff;
     border-radius: 10px;
 }
.left-div::-webkit-scrollbar {
    width: 10px;
}
.left-div::-webkit-scrollbar-track {
    background: linear-gradient(
        0deg,
        rgb(218, 105, 105) 0%,
        rgb(104, 101, 199) 100%
        
    );
}
.left-div::-webkit-scrollbar-thumb {
     box-shadow: inset  10px 10px 10px  red;
    background: transparent;
    /* border-radius: 5px;
    border: 2px solid rgb(162, 202, 16);
    box-shadow: inset 1px 1px 5px rgb(162, 202, 16); */
    
}


 /* .left-div {
    width: 90%;
    max-width: 300px;
    max-height: 80vh;
    padding: 2em;
    overflow: auto;
    
 }
 .box{
     height: 800px
 }
  .spanval{
     height: 20px;
     display: inline-block;
     width: 90%;
     margin: 10px 0;
     padding: 5px 0;
     text-align: center;
     color: #fff;
     border-radius: 10px;
 }
.left-div::-webkit-scrollbar {
    width: 2px;
    height: 10px;
}
.left-div::-webkit-scrollbar {
    width: 10px;
}
.left-div::-webkit-scrollbar-track {
    background: rgb(226, 223, 223);
    border-radius: 10px;
}
.left-div::-webkit-scrollbar-thumb {
    background: rgb(196, 193, 193);
    border-radius: 6px;
}
.left-div::-webkit-scrollbar-thumb:hover {
    background: rgb(100, 100, 100);
    border-radius: 10px;
}
.left-div::-webkit-scrollbar-thumb:active {
    background: rgb(68, 68, 68);
    border-radius: 10px;
} */

 /* .left-div {
    width: 90%;
    max-width: 300px;
    max-height: 80vh;
    padding: 2em;
    overflow: auto;
    
 }
 .box{
     height: 800px
 }
  .spanval{
     height: 20px;
     display: inline-block;
     width: 90%;
     margin: 10px 0;
     padding: 5px 0;
     text-align: center;
     color: #fff;
     border-radius: 10px;
 }
 .left-div::-webkit-scrollbar {
    width: 10px;
}
.left-div::-webkit-scrollbar-track {
    background-image: repeating-linear-gradient(
        45deg,
        red 0,
        red 1px,
        transparent 0,
        transparent 50%
    );
    background-size: 10px 10px;
}
.left-div::-webkit-scrollbar-thumb {
    background: transparent;
    border-radius: 5px;
    border: 2px solid blueviolet;
    box-shadow: inset 1px 1px 5px blueviolet;
} */