CODEWITHSUNDEEP
cssscrollbarscrollbars
Dan
Dan

Reputation: 57881

Cross-browser styling scrollbars

I know this is possible in IE and Opera.

And what can be done to add style to scrollbar in Chrome and Firefox?

(I need to style overflow:scroll, not browser scrollbars)

I know this can be done via jquery.

So should I desperately use JavaScript after detecting FF or Chrome?

Upvotes: 0

Views: 1252

Answers (2)

Frank
Frank

Reputation: 1

if you use PHP, here a function that will output all browser's needed css in a class passed as parameter to the function. Then you call the function in the <head><style>... section of your script. DON'T FORGET ADDING THE CLASS TO <body><html> (I don't eevn know which is the correct one; i always do the 2 because at some point I may have been led into thinking some browsers use <html> and others <body>)

function WriteScrollBarsStyle ($thumb_color_code,$track_color_code,$border_width='2px',$class_name='ScrollBarsColored') {echo 
    .{$class_name} {
    scrollbar-color:#{$thumb_color_code} #{$track_color_code};
    }

    .{$class_name}::-webkit-scrollbar {
    height:100%;
    }

    .{$class_name}::-webkit-scrollbar-track {
    border:{$border_width} solid #{$thumb_color_code};
    background:#{$track_color_code};
    background-color:#{$track_color_code};
    }

    .{$class_name}::-webkit-scrollbar-thumb {
    border:{$border_width} solid #{$track_color_code};
    background:#{$thumb_color_code};
    background-color:#{$thumb_color_code};
    }

    .{$class_name}::-webkit-scrollbar-thumb:hover {
    background:#{$thumb_color_code};
    background-color:#{$thumb_color_code};
    }";
}

HTML & PHP in your script :

<html><head>[...]
   <style>[...]<?php WriteScrollBarsStyle('DCAB88','950505'); ?> 
   </style>

No # needed to the color codes :) in case you're not in quirks mode...

P.S. How do we paste code with carriage returns pressing the {} button on here? My code gets truncated every time I try and I'm too stupid and or impatient to find how to deal with this very counter-intuitive interface detail....

Upvotes: 0

Sarfraz
Sarfraz

Reputation: 382686

Check out JScrollbar

Upvotes: 2

Related Questions