Scrollbar css add

css here......

.mousescroll::-webkit-scrollbar {

    width: 7px;

}

.mousescroll::-webkit-scrollbar-track {

    border-radius: 10px;

    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 

    }

 

.mousescroll::-webkit-scrollbar-thumb {

    border-radius: 10px;

    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 

}

div#chatlist {

    width: 50px;

    height: 140px;

}

div.mousescroll {

    overflow: hidden;

}

div.mousescroll:hover {

    overflow-y: scroll;

}

html demo

<div id="chatlist" class="mousescroll">

    <ul>

        <li>item</li>

        <li>item</li>

        <li>item</li>

        <li>item</li>

        <li>item</li>

        <li>item</li>

        <li>item</li>

        <li>item</li>

        <li>item</li>

        <li>item</li>

        <li>item</li>

        <li>item</li>

        <li>item</li>

        <li>item</li>

        <li>item</li>

        <li>item</li>

        <li>item</li>

        <li>item</li>

        <li>item</li>

        <li>item</li>

    </ul>