CSS scrollbar style cross browser

Question

How can I define a CSS scrollbar style cross browser  I tested this code  it only works in IE and opera  but failed in Chrome  Safari and Firefox    lt style type  text css  gt   lt  --     body       scrollbar-face-color   000000      scrollbar-shadow-color   2D2C4D      scrollbar-highlight-color  7D7E94      scrollbar-3dlight-color   7D7E94      scrollbar-darkshadow-color   2D2C4D      scrollbar-track-color   7D7E94      scrollbar-arrow-color   C1C1D1    -- gt   lt  style gt

User · Answer

nanoScrollerJS is simply to use  I always use them     Browser compatibility    IE7  Firefox 3  Chrome Safari 4  Opera 11 60    Mobile browsers support    iOS 5   iPhone  iPad and iPod Touch  iOS 4  with a polyfill  Android Firefox Android 2 2 2 3 native browser  with a polyfill  Android Opera 11 6  with a polyfill    Code example from the Documentation    Markup - The following type of markup structure is needed to make the plugin work     lt div id  about  class  nano  gt       lt div class  nano-content  gt      content here       lt  div gt   lt  div gt

User · Answer

Scrollbar CSS styles are an oddity invented by Microsoft developers  They are not part of the W3C standard for CSS and therefore most browsers just ignore them

User · Answer

try this it s very easy to use and tested on IE and Safari and FF and worked fine and beside no need for many div around it just add id and it will work fine  after you link you Js and Css files  FaceScroll Custom scrollbar  hope it help s  Edit Step 1  Add the below script to the  section of your page    lt link href  general css  rel  stylesheet  type  text css  gt    lt script type  text javascript  src  http   ajax googleapis com ajax libs jquery 1 7 1 jquery min js  gt  lt  script gt   lt script type  text javascript  src  https   ajax googleapis com ajax libs jqueryui 1 8 18 jquery-ui min js  gt  lt  script gt   lt script type  text javascript  src  jquery ui touch-punch min js  gt  lt  script gt    lt script type  text javascript  src  facescroll js  gt  lt  script gt   lt script type  text javascript  gt      jQuery function       on page DOM load             demo1   alternateScroll                demo2   alternateScroll    vertical-bar-class    styled-v-bar    hide-bars   false               lt  script gt    Step 2  Then in the BODY of your page  add the below sample HTML block to your page    lt p gt  lt b gt Scrollbar  default style  shows onMouseover lt  b gt  lt  p gt    lt div id  demo1  style  width 300px  height 250px  padding 8px  background lightyellow  border 1px solid gray  resize both  overflow scroll  gt   From Wikipedia- Gunpowder  also known since in the late 19th century as black powder  was the first chemical explosive and the only one known until the mid 1800s  2  It is a mixture of sulfur  charcoal  and potassium nitrate  saltpeter  - with the sulfur and charcoal acting as fuels  while the saltpeter works as an oxidizer  3  Because of its   lt  div gt    lt br   gt    lt p gt  lt b gt Scrollbar  alternate style   always shown lt  b gt  lt  p gt    lt div id  demo2  style  width 400px  height 130px  padding 10px  padding-right 8px  background lightyellow  border 1px solid gray  overflow scroll  resize both   gt   From Wikipedia- Gunpowder  also known since in the late 19th century as black powder  was the first chemical explosive and the only one known until the mid 1800s  2  It is a mixture of sulfur  charcoal  and potassium nitrate  saltpeter  - with the sulfur and charcoal acting as fuels  while the saltpeter works as an oxidizer  3  Because of its   lt  div gt

User · Answer

As of IE6 I believe you cannot customize the scroll bar using those properties  The Chris Coyier article linked to above goes into nice detail about the options for webkit proprietary css for customizing the scroll bar   If you really want a cross browser solution that you can fully customize you re going to have to use some JS  Here is a link to a nice plugin for it called FaceScroll  http   www dynamicdrive com dynamicindex11 facescroll index htm

User · Answer

Webkit s support for scrollbars is quite sophisticated  This CSS gives a very minimal scrollbar  with a light grey track and a darker thumb     -webkit-scrollbar     width  12px      for vertical scrollbars      height  12px     for horizontal scrollbars         -webkit-scrollbar-track     background  rgba 0  0  0  0 1        -webkit-scrollbar-thumb     background  rgba 0  0  0  0 5       This answer is a fantastic source of additional information

User · Answer

jScrollPane is a good solution to cross browser scrollbars and degrades nicely

[css] CSS scrollbar style cross browser

Examples related to css

Examples related to scrollbar