How do I change the scrollbar colours?

How do I change the scrollbar colours?

eatyourgreenseatyourgreens Posts: 3Questions: 1Answers: 0

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.

Answers

  • allanallan Posts: 63,498Questions: 1Answers: 10,471 Site admin

    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

  • eatyourgreenseatyourgreens Posts: 3Questions: 1Answers: 0

    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

  • allanallan Posts: 63,498Questions: 1Answers: 10,471 Site admin

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

    Allan

  • eatyourgreenseatyourgreens Posts: 3Questions: 1Answers: 0

    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

This discussion has been closed.