How do I change the scrollbar colours?

eatyourgreens

I have a webpage with a black background and the default black scrollbars are virtually invisible. I have tried using jscollpane and that works fine but i get some really nasty sizing problems when I fade the table container in and out. I suspect there is a simpler solution though...

The datable is initialised like this

$('#browseGrid').html( '

' );
browseList = $('#dataTable').DataTable( {
options etc...
});

I have also tried this kind of approach to the container div but no joy
http://cssdeck.com/labs/css3-webkit-vertical-scrollbars/

All I want is a white scrollbar instead of black!.
Otherwise I am having a fair amount of success with datatables, thanks.

allan

The scrollbars are provided by the web-browser (and therefore most likely by the OS) and not in any way by DataTables.

Some browsers let you style the scrollbars using CSS (Webkit, Blink and IE browsers I think) but the CSS options vary significantly. Probably best to Google for how to style scrollbars, since it isn't really a DataTables issue.

Allan

eatyourgreens

Thanks, I kind of figured as such but am trying to work out which element i need to set the scroll bar style on. If I do a simple example with a standard html table I can style the scrollbars just fine. It is only when i use a datatable that whatever i try the scrollbar style seems to return to the default

allan

div.dataTables_scrollBody is the element that scrolls in a DataTable.

Allan

eatyourgreens

Got it working. I needed this callback:

        "initComplete": function(settings, json) {
            $('body').find('.dataTables_scrollBody').addClass("scrollbar");
        },

and this css:

.scrollbar::-webkit-scrollbar
{
    width: 6px;
    background-color: #000000;
}

.scrollbar::-webkit-scrollbar-thumb
{
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
    background-color: #FFFFFF;
}

Many thanks