How to change style jscrollpane EasyUI

Question

I'm using EasyUI Frozen Columns for DataGrid, so how to change jscrollpane style, was trying:

::-webkit-scrollbar {
    width: 12px;
}

but that doesn't work.

Answer 1

one solution is to keep the datagrid in div and add a style .scrollpane now apply the css as below:

For Chrome:

div.scroll-pane::-webkit-scrollbar {
    width: 12px;
}


/* Track */
div.scroll-pane::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
    -webkit-border-radius: 10px;
    border-radius: 10px;
}

/* Handle */
div.scroll-pane::-webkit-scrollbar-thumb {
    -webkit-border-radius: 10px;
    border-radius: 10px;
    background: rgba(255, 156, 0, 0.89); 
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 
}


div.scroll-pane::-webkit-scrollbar-thumb:window-inactive {
    background: rgba(255, 156, 0, 0.44); 
}

For FireFox using jsscrollpane

 $(document).ready(function () {
            var FIREFOX = /Firefox/i.test(navigator.userAgent); 
            if (FIREFOX) {
                $('.scroll-pane').jScrollPane();
            }

        });