how to increase scroll bar width when mouse over

I am trying to increase my body scroll bar width using below code.

    <body class="expanScrollWidth">
<div>My page Content</div>
</body>

I tried to do this using below CSS class

.expanScrollWidth::-webkit-scrollbar:hover{
    width: 20px !important;
}

my second effort

  body::-webkit-scrollbar:hover{
    width: 20px !important;
}

both are not working. Can you help me to do this.

6 thoughts on “how to increase scroll bar width when mouse over”

  1. It should work

    div {
        width: 300px;
        height: 300px;
        overflow-y: scroll;
        background-color: blue;
    }
    
    /* Custom Webkit Scrollbar */
    /* http://css-tricks.com/custom-scrollbars-in-webkit/ */
    ::-webkit-scrollbar {
        height: 10px;
        width: 10px;
    }
    
    ::-webkit-scrollbar:hover {
        height: 40px;
        width: 40px;
    }
    
    
    ::-webkit-scrollbar-thumb {
        background-color: red;
    }
    ::-webkit-scrollbar-thumb:hover {
        background-color: blue;
    }
    div:hover::-webkit-scrollbar-corner {
        width: 40px;
        /*background-color: red !important;*/
    }
    
    ::-webkit-scrollbar-track-piece {
        /*background-color: #efefef;*/
    }
    
    ::-webkit-scrollbar-thumb:vertical {
        /*background-color: #666;*/
    }
    <div><img src="http://placehold.it/500x500" /></div>
    Reply

Leave a Comment