The aim of this post is to review the necessary styles to custom the scroll in WebKit, on the basis of its blog tutorial http://www.webkit.org/blog/363/styling-scrolls/ but customizing each of the scroll parts step by step. The example given in http://trac.webkit.org/export/41842/trunk/LayoutTests/scrolls/overflow-scroll-combinations.html is difficult to understand given that, in the same styles page the different variations are mixed and it seems that a hard work with CSS is needed to custom the scroll.
The first thing I am going to do is to prepare a ‘div’ with scrolls to separate those styles from the styles relating to the ones of its customization. We’ll be able to apply the styles to any element with scroll, the page, an ‘iframe’, text area or any other element with ‘overflow’.
To point out that an object must use a custom scroll, we must associate the scrollbar pseudo-element with it, which will hide the scroll by default and will use the one defined in the css. The height and width will be the horizontal and vertical scroll ones, respectively.
|
1 |
div::-webkit-scroll {width: 15px ;height:15px;} |
We have just hidden the scroll by default. Next I am going to collect the most important parts of the article from the WebKit blog so we can follow with the examples. The list of the pseudo-elements for customizing the different pieces of the scroll is:
- scrollbar
- scrollbar-button
- scrollbar-thumb
- scrollbar-track
- scrollbar-track-piece
- scrollbar-corner
- resizer
Each of this scroll pieces can be customized with edges, shadows, background images, etc. The next pseudo-classes can be used to apply to the scroll pseudo-elements:
- :horizontal: applies to the pieces of the horizontal scroll.
- :vertical: applies to the pieces of the vertical scroll.
- :decrement: applies to the button and to the track pieces of the upper and left scroll.
- :increment: applies to the button and to the track pieces of the lower and right scroll.
- :start: it shows if the button and the track pieces go before the scrollbar.
- :end: it shows if the button and the track pieces parts go after the scrollbar.
- :double-button: it is used for detecting if a button goes next to another one at one of the scroll ends.
- :single-button: it is used for detecting if a button goes alone at one of the scroll ends.
- :no-button: it is applied to the track pieces to show if these run to the edge of the scrollbar, as when there are no buttons.
- :corner-present: it is applied to all the scroll pieces and it shows if the corner of the scroll is present.
- window-inactive: it is applied to all the scroll pieces and it shows if the scroll window is active.
In addition:
- The pseudo-classes :enabled, :disabled, :hover and :active also work with the different scroll pieces.
- The ‘none’ value of the ‘display’ property can be used to hide pieces of the scroll.
- Margins can be used all along the scroll axis and these can be negative, so that the track can be inflated to cover the buttons partially.
If we want to use the Chrome Developer Tools to apply the styles to the different scroll parts, we will see we can not select them. So the best thing to do will be to create those styles over a ‘div’ in order to review them with the Developer Tools and then we will move them to the scroll part where we want them to be applied. First, I custom the track and thumb of the scroll:
|
1 2 3 4 5 6 7 8 9 10 |
.scroll::-webkit-scrollbar-track { background:#FBFBFB; box-shadow: 3px 3px 10px rgba(0,0,0,.25) inset; } .scroll::-webkit-scrollbar-thumb { background: #84C4FF; border-radius: 10px; border:1px solid rgba(0,0,0,0.3); box-shadow: -3px -3px 6px rgba(66,137,224,1) inset,3px 3px 3px rgba(158,226,225,1) inset; } |
If I am going to set out some different styles for the parts of the horizontal and vertical scroll, I will have to use the pseudo-classes: horizontal and vertical. For example, if I want to set out a thumb identical to the one used in Mac, I have to use images, so I will need different images for the horizontal and vertical thumb. On the demo of the WebKit’s blog we can see how different images are used to custom the scroll, but there is something I did not like, which is the JavaScript use to do a preload of the images in order to avoid the blinking when you change the image on the state change. Instead of using different images for each state I do think it would be better to use sprites in order to avoid the JavaScript use and having all the scroll customization in the CSS. We can achieve this by simply changing the coordinates of the image as in the next example. Maybe the tutorial’s date has to be taken into account and the fact that the border-image property was not fully implemented as also the working of the border-image and webkit-border-image differ on some aspects.
|
1 2 3 4 5 6 7 |
.scroll::-webkit-scrollbar-thumb:horizontal { -webkit-border-image: url(scrollbar/thumb-horizontal2.png) 0 15 15 15; border-width: 0 15px; } ::-webkit-scrollbar-thumb:horizontal:hover { -webkit-border-image: url(scrollbar/thumb-horizontal2.png) 15 15 0 15; } |
Now, I am going to follow with the example without images, adding the scrollbar-button style. To do this, I add the background images to each of the buttons so these show an arrow. Next, I style the resize and the scrollbar-corner.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
/*flechas*/ .scroll::-webkit-scrollbar-button:vertical:decrement{ background-image: url(scrollbar/arrow-up.png), -webkit-linear-gradient(left, #f9f9f9 50%,#e2e2e2 100%) ; background-repeat: no-repeat; background-position: 3px 4px, 0 0; } .scroll::-webkit-scrollbar-button:vertical:increment{ background-image: url(scrollbar/arrow-down.png), -webkit-linear-gradient(left, #f9f9f9 50%,#e2e2e2 100%) ; background-repeat: no-repeat; background-position: 3px 5px, 0 0; } .scroll::-webkit-scrollbar-button:horizontal:decrement{ background-image: url(scrollbar/arrow-left.png), -webkit-linear-gradient(top, #f9f9f9 50%,#e2e2e2 100%) ; background-repeat: no-repeat; background-position: 4px 3px, 0 0; } .scroll::-webkit-scrollbar-button:horizontal:increment{ background-image: url(scrollbar/arrow-right.png), -webkit-linear-gradient(top, #f9f9f9 50%,#e2e2e2 100%) ; background-repeat: no-repeat; background-position: 5px 3px, 0 0; } /*corner y resizer*/ .scroll::-webkit-resizer { background: #F2F2F2 url(scrollbar/resizer.png)no-repeat 2px 4px; border-top:1px solid #D9D9D9; border-left:1px solid #D9D9D9; } .scroll::-webkit-scrollbar-corner { background: #F2F2F2; border-top:1px solid #D9D9D9; border-left:1px solid #D9D9D9; } |
Seeing the css code of the WebKit’s blog tutorial, the customization of the scroll on WebKit may seem hard and with a big amount of CSS intervention, but we can see that, in fact it is a very simple task. At this point, the only thing left to do in order to improve our scroll is to customize each of the states of scroll enabled, :disabled, :hover and :active and to vary, if we want it, the options of the different scroll elements with their corresponding pseudo-classes.
Tags: CSS WebKit
