Gyancode

A free library of HTML, CSS, JS

Search This Blog

Tuesday 1 March 2016

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>

No comments :

Post a Comment