Menu
I would like the style of the scrollbar of my div style was similar to the iPhone or the new finder osx Lion. It must be compatible with all browsers. Is it possible?
605
For webkit browsers, you can use the following pseudo elements to customize the browser's scrollbar: ::-webkit-scrollbar the scrollbar. ::-webkit-scrollbar-button the buttons on the scrollbar (arrows pointing upwards and downwards). ::-webkit-scrollbar-thumb the draggable scrolling handle.
If you want to add a scrollbar to an element like a <div>, you'll have to use the CSS overflow property. Scrollbars can be vertical (Y-axis) or horizontal (X-axis). Implementing a custom scrollbar to elements is the same. In this example, I'll create vertical custom scrollbar on a <div>, which is just 5px wide.
::-webkit-scrollbar. Non-standard: This feature is non-standard and is not on a standards track. Do not use it on production sites facing the Web: it will not work for every user. There may also be large incompatibilities between implementations and the behavior may change in the future.
As of 2020, 96% of internet users are running browsers that support CSS scrollbar styling. However, you will need to write two sets of CSS rules to cover Blink and WebKit and also Firefox browsers. In this tutorial, you will learn how to use CSS to customize scrollbars to support modern browsers.
There are actually ways to change the looks of the scrollbars in webkit browsers, with CSS only http://css-tricks.com/9130-custom-scrollbars-in-webkit/ It is currently not possible to style scrollbars to have a uniform cross browser appearance, though. You will have to resort to jQuery to get this done http://www.net-kit.com/jquery-custom-scrollbar-plugins/
163
You can style scrollbars using jQuery.
http://www.net-kit.com/jquery-custom-scrollbar-plugins/
I think, #3 in that list is similar to the iPhone scrollbars. May require slight modification.
36
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
