I want my scroll to have a transparent background, for the scroll to be a slight white dash and have a up arrow and down arrow at the top...this is how i am customising at the moment. It gives me a grey long scroll...but i dont know what to edit to change it?
::-webkit-scrollbar {
width: 10px;
height: 6px;
}
::-webkit-scrollbar-button:start:decrement,
::-webkit-scrollbar-button:end:increment {
height: 30px;
display: block;
background-color: transparent;
}
::-webkit-scrollbar-track-piece {
background-color: transparent;
-webkit-border-radius: 6px;
}
::-webkit-scrollbar-thumb:vertical {
height: 50px;
background-color: #666;
-webkit-border-radius: 6px;
}
::-webkit-scrollbar-thumb:horizontal {
width: 50px;
background-color: #666;
-webkit-border-radius: 3px;
}
Answered a question like this before, here are three jQuery plugins that do a good job at custom scrollbars across all browsers:
- jScrollpane
- jQueryUI slider plugin
- and jQuery SlimScroll
Fist, I just want to make sure you know this only works in webkit browsers (Chrome and Safari).
Here is a more complete sample, as you can see, it takes a lot of css to get something that looks decent.
<head>
<style>
/* set the width and height */
::-webkit-scrollbar {
width: 14px;
height: 6px;
}
/* turn on the buttons at the top */
::-webkit-scrollbar-button:start{
display: block;
}
/* turn off the buttons at the bottom */
::-webkit-scrollbar-button:end{
display: none
}
::-webkit-scrollbar-track-piece {
background-color: transparent;
-webkit-border-radius: 6px;
}
::-webkit-scrollbar-thumb:vertical {
height: 50px;
background-color: #666;
-webkit-border-radius: 6px;
}
::-webkit-scrollbar-thumb:horizontal {
width: 50px;
background-color: #666;
-webkit-border-radius: 3px;
}
::-webkit-scrollbar-corner {
background-image: url(http://trac.webkit.org/export/41842/trunk/LayoutTests/scrollbars/resources/corner.png);
background-repeat: no-repeat;
}
::-webkit-scrollbar-corner:window-inactive {
background-image: url(http://trac.webkit.org/export/41842/trunk/LayoutTests/scrollbars/resources/corner-inactive.png);
}
::-webkit-resizer {
background-image: url(http://trac.webkit.org/export/41842/trunk/LayoutTests/scrollbars/resources/resizer.png);
background-repeat: no-repeat;
background-position: bottom right;
}
::-webkit-resizer:window-inactive {
background-image: url(http://trac.webkit.org/export/41842/trunk/LayoutTests/scrollbars/resources/resizer-inactive.png);
}
::-webkit-scrollbar-track-piece:disabled {
display: none !important;
}
::-webkit-scrollbar-button:disabled {
display: none !important;
}
::-webkit-scrollbar-track:disabled {
margin: 6px;
}
::-webkit-scrollbar:vertical {
-webkit-border-image: url(http://trac.webkit.org/export/41842/trunk/LayoutTests/scrollbars/resources/vertical-button.png) 2 0 2 0;
border-color: transparent;
border-width: 2px 0;
background-image: url(http://trac.webkit.org/export/41842/trunk/LayoutTests/scrollbars/resources/vertical-button-background.png);
background-repeat: repeat-y;
}
::-webkit-scrollbar:vertical:corner-present {
border-bottom-width: 0;
}
::-webkit-scrollbar-track:vertical:disabled:corner-present {
margin-bottom: 5px;
}
::-webkit-scrollbar:vertical:window-inactive {
-webkit-border-image: url(http://trac.webkit.org/export/41842/trunk/LayoutTests/scrollbars/resources/vertical-button-inactive.png) 2 0 2 0;
background-image: url(http://trac.webkit.org/export/41842/trunk/LayoutTests/scrollbars/resources/vertical-button-background-inactive.png);
}
::-webkit-scrollbar-thumb:vertical {
-webkit-border-image: url(http://trac.webkit.org/export/41842/trunk/LayoutTests/scrollbars/resources/vertical-thumb.png) 13 0 13 0;
border-color: transparent;
border-width: 13px 0;
min-height: 20px;
}
::-webkit-scrollbar-thumb:vertical:hover {
-webkit-border-image: url(http://trac.webkit.org/export/41842/trunk/LayoutTests/scrollbars/resources/vertical-thumb-hover.png) 13 0 13 0;
}
::-webkit-scrollbar-thumb:vertical:active {
-webkit-border-image: url(http://trac.webkit.org/export/41842/trunk/LayoutTests/scrollbars/resources/vertical-thumb-active.png) 13 0 13 0;
}
::-webkit-scrollbar-thumb:vertical:window-inactive {
-webkit-border-image: url(http://trac.webkit.org/export/41842/trunk/LayoutTests/scrollbars/resources/vertical-thumb-inactive.png) 13 0 13 0;
}
::-webkit-scrollbar-track-piece:vertical:start:no-button,
::-webkit-scrollbar-track-piece:vertical:start {
margin-top: 6px;
}
::-webkit-scrollbar-track-piece:vertical:end:no-button,
::-webkit-scrollbar-track-piece:vertical:end {
margin-bottom: 6px;
}
::-webkit-scrollbar-track-piece:vertical:end:no-button:corner-present,
::-webkit-scrollbar-track-piece:vertical:end:corner-present {
margin-bottom: 5px;
}
::-webkit-scrollbar-track-piece:vertical:start:single-button,
::-webkit-scrollbar-track-piece:vertical:start:double-button,
::-webkit-scrollbar-track-piece:vertical:start {
margin-top: -6px;
}
::-webkit-scrollbar-track-piece:vertical:end:single-button,
::-webkit-scrollbar-track-piece:vertical:end:double-button,
::-webkit-scrollbar-track-piece:vertical:end {
margin-bottom: -6px;
}
::-webkit-scrollbar-track:vertical:disabled {
-webkit-border-image: url(http://trac.webkit.org/export/41842/trunk/LayoutTests/scrollbars/resources/vertical-track-disabled.png) 13 0 13 0;
border-color: transparent;
border-width: 13px 0;
}
::-webkit-scrollbar-track-piece:vertical:decrement {
-webkit-border-image: url(http://trac.webkit.org/export/41842/trunk/LayoutTests/scrollbars/resources/vertical-track.png) 13 0 13 0;
border-color: transparent;
border-width: 13px 0 0 0;
}
::-webkit-scrollbar-track-piece:vertical:decrement:hover {
-webkit-border-image: url(http://trac.webkit.org/export/41842/trunk/LayoutTests/scrollbars/resources/vertical-track-hover.png) 13 0 13 0;
}
::-webkit-scrollbar-track-piece:vertical:decrement:active {
-webkit-border-image: url(http://trac.webkit.org/export/41842/trunk/LayoutTests/scrollbars/resources/vertical-track-active.png) 13 0 13 0;
}
::-webkit-scrollbar-track-piece:vertical:increment {
-webkit-border-image: url(http://trac.webkit.org/export/41842/trunk/LayoutTests/scrollbars/resources/vertical-track.png) 13 0 13 0;
border-color: transparent;
border-width: 0 0 13px 0;
}
::-webkit-scrollbar-track-piece:vertical:increment:hover {
-webkit-border-image: url(http://trac.webkit.org/export/41842/trunk/LayoutTests/scrollbars/resources/vertical-track-hover.png) 13 0 13 0;
}
::-webkit-scrollbar-track-piece:vertical:increment:active {
-webkit-border-image: url(http://trac.webkit.org/export/41842/trunk/LayoutTests/scrollbars/resources/vertical-track-active.png) 13 0 13 0;
}
::-webkit-scrollbar-button:vertical {
height: 20px;
-webkit-border-image: url(http://trac.webkit.org/export/41842/trunk/LayoutTests/scrollbars/resources/vertical-button.png) 2 0 2 0;
border-color: transparent;
border-width: 2px 0;
}
::-webkit-scrollbar-button:vertical:decrement {
background-image: url(http://trac.webkit.org/export/41842/trunk/LayoutTests/scrollbars/resources/vertical-decrement-arrow.png), url(resources/vertical-button-background.png);
background-repeat: no-repeat, repeat-y;
background-position: 3px 3px, 0 0;
}
::-webkit-scrollbar-button:vertical:decrement:hover {
-webkit-border-image: url(http://trac.webkit.org/export/41842/trunk/LayoutTests/scrollbars/resources/vertical-button-hover.png) 2 0 2 0;
background-image: url(http://trac.webkit.org/export/41842/trunk/LayoutTests/scrollbars/resources/vertical-decrement-arrow.png), url(resources/vertical-button-background-hover.png);
}
::-webkit-scrollbar-button:vertical:decrement:active {
-webkit-border-image: url(http://trac.webkit.org/export/41842/trunk/LayoutTests/scrollbars/resources/vertical-button-active.png) 2 0 2 0;
background-image: url(http://trac.webkit.org/export/41842/trunk/LayoutTests/scrollbars/resources/vertical-decrement-arrow.png), url(resources/vertical-button-background-active.png);
}
::-webkit-scrollbar-button:vertical:decrement:window-inactive {
-webkit-border-image: url(http://trac.webkit.org/export/41842/trunk/LayoutTests/scrollbars/resources/vertical-button-inactive.png) 2 0 2 0;
background-image: url(http://trac.webkit.org/export/41842/trunk/LayoutTests/scrollbars/resources/vertical-decrement-arrow.png), url(resources/vertical-button-background-inactive.png);
}
::-webkit-scrollbar-button:vertical:increment {
background-image: url(http://trac.webkit.org/export/41842/trunk/LayoutTests/scrollbars/resources/vertical-increment-arrow.png), url(resources/vertical-button-background.png);
background-repeat: no-repeat, repeat-y;
background-position: 3px 8px, 0 0;
}
::-webkit-scrollbar-button:vertical:increment:hover {
-webkit-border-image: url(http://trac.webkit.org/export/41842/trunk/LayoutTests/scrollbars/resources/vertical-button-hover.png) 2 0 2 0;
background-image: url(http://trac.webkit.org/export/41842/trunk/LayoutTests/scrollbars/resources/vertical-increment-arrow.png), url(resources/vertical-button-background-hover.png);
}
::-webkit-scrollbar-button:vertical:increment:active {
-webkit-border-image: url(http://trac.webkit.org/export/41842/trunk/LayoutTests/scrollbars/resources/vertical-button-active.png) 2 0 2 0;
background-image: url(http://trac.webkit.org/export/41842/trunk/LayoutTests/scrollbars/resources/vertical-increment-arrow.png), url(resources/vertical-button-background-active.png);
}
::-webkit-scrollbar-button:vertical:increment:window-inactive {
-webkit-border-image: url(http://trac.webkit.org/export/41842/trunk/LayoutTests/scrollbars/resources/vertical-button-inactive.png) 2 0 2 0;
background-image: url(http://trac.webkit.org/export/41842/trunk/LayoutTests/scrollbars/resources/vertical-increment-arrow.png), url(resources/vertical-button-background-inactive.png);
}
::-webkit-scrollbar-button:double-button:vertical:start:decrement,
::-webkit-scrollbar-button:vertical:start:decrement,
{
height: 14px;
border-bottom-width: 0;
background-position: 3px 3px, 0 0;
}
::-webkit-scrollbar-button:double-button:vertical:start:increment,
::-webkit-scrollbar-button:vertical:start:increment{
background-position: 3px 4px, 0 0;
}
::-webkit-scrollbar-button:double-button:vertical:end:decrement,
{
background-position: 3px 8px, 0 0;
}
::-webkit-scrollbar-button:double-button:vertical:end:increment {
height: 14px;
border-top-width: 0;
background-position: 3px 4px, 0 0;
}
::-webkit-scrollbar-button:vertical:end:increment:corner-present {
border-bottom-width: 0;
height: 19px;
}
::-webkit-scrollbar-button:double-button:vertical:end:increment:corner-present,
::-webkit-scrollbar-button:vertical:end:increment:corner-present {
height: 13px;
}
</style>
<body class="double-start">
enter code here
</body>
This post has some pretty good info on scroll-bar css
http://css-tricks.com/custom-scrollbars-in-webkit/
This post has a few jquery solutions that might be worth looking at, in particular Tiny Scrollbar which has support for some devices.
