CSS Landscaping scroll bar

Original Address Http://www.webhek.com/custom-scrollbars-in-webkit

As early as the IE5.5, the browser can personalize the scroll bar on the page, but the IE5.5 features are nonstandard, for example scrollbar-base-color , you can apply these attributes to the elements on the page that can appear on the scroll bar (for example body ), with these settings, You can design a variety of scroll bars:

Watch the Demo

But eventually IE dropped these features.

Now, the personalization feature of the scroll bar is back, and the difference is that the WebKit browser picks up the feature and performs better because the "Shadow DOM" is used to handle these tasks. It's been a lot of years, but you still need to use the browser engine prefix. David Hyatt implemented a page that shows the effects of various custom scrollbars as early as 2009

Customize the various parts of the scroll bar

For each part of the scroll bar, there are corresponding CSS pseudo-elements to decorate.

::-webkit-scrollbar{/* 1 */}::-webkit-scrollbar-button{/* 2 */}::-webkit-scrollbar-track {/ * 3 * * }::-webkit-scrollbar-track-piece {/ * 4 * } ::-webkit-scrollbar-thumb {/ * 5 */ }::-webkit-scrollbar-corner {/ * 6 * }: :-webkit-resizer {/ * 7 */ }            

Various states of the scroll bar

These are pseudo-class selectors, and using them, you can select specific parts and differentiate the various states of the scrollbar.

:Horizontal:vertical:decrement:increment:start::  Double-button:single-button:no-button:corner-present: window-inactive 

The following is a detailed explanation:

: horizontal– Select horizontal scroll bar

: vertical– Select the vertical scroll bar.

:D ecrement– Select the scroll bar with the DOWN ARROW or RIGHT arrow button (typically on the top of the vertical scroll bar, to the left of the horizontal scroll bar.) ).

: increment– Select the scroll bar with the UP ARROW or LEFT arrow buttons (typically at the bottom of the vertical scroll bar, to the right of the horizontal scroll bar.) )

: start– Select the scroll bar for the part in front of the rail

: end– Select the scroll bar behind the rail for the part

:d ouble-button– refers to scroll bars with both up and down arrow buttons (or left and right arrow buttons) at both ends of the rail

: single-button– refers to a scroll bar with only a single arrow button at both ends of the rail

: no-button– scroll bar with no arrow buttons at both ends of the slide

: corner-present– refers to the existence of a common corner of the scroll bar at the intersection

: window-inactive– refers to the scroll bar where the current window is in an inactive state

Put them all together.

These pseudo-elements and pseudo-classes can be mixed, and here are some examples of code:

{   /* Select the top half (or left half) or scrollbar track individually */}/* Select the thumb when the BR Owser window isn ' t in focus */}/* Select the down or leftscroll button when it's being hovered by the mouse */
              
               } 
                  

An instance of a very simple custom scroll bar

The code is this:

::-webkit-scrollbar{Width: 12px; } ::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 6px rgba (0,0,0,0.3); Border-radius: 10px;} ::-webkit-scrollbar-thumb { Border-radius: 10px; -webkit-box-shadow: inset 0 0 6px rgba (0,0,0,0.5); }

Watch the Demo

scroll bar

CSS Landscaping scroll bar