Custom navigation Bar

/*defines the width of the scrollbar and the background aspect corresponding to the size of the scroll bar, respectively*/Body::-webkit-scrollbar{width:16px;Height:16px;Background-color:Red; }/*define a scrollbar track inner Shadow + fillet*/Body::-webkit-scrollbar-track{-webkit-box-shadow:inset 0 0 6px rgba (0,0,0,0.3);Border-radius:10px;Background-color:Green;margin:10px 10px;//up and down corresponding to the right navigation bar, corresponding to the lower side navigation bar}/*Define a Shadow + fillet within a slider*/Body::-webkit-scrollbar-thumb{Border-radius:10px;-webkit-box-shadow:inset 0 0 6px rgba (0,0,0,.3);Background-color:Blue;Background-image:-webkit-linear-gradient (45deg, Rgba (255, 255, 255,. 2) 25%,transparent 25%,transparent 50%,rgba (255, 255, 255,. 2) 50 %,rgba (255, 255, 255,. 2) 75%,transparent 75%,transparent);//Gradient effect}

Scroll bar composition

• ::-webkit-scrollbar scroll bar integral part
• ::-webkit-scrollbar-thumb The small box inside the scrollbar, can move up or down (or left to right, depending on whether it is a vertical scroll bar or a horizontal scroll bar)
• ::-webkit-scrollbar-track track with scroll bar (with thumb inside)
• ::-webkit-scrollbar-button scroll bar on both ends of the track button, allows you to fine-tune the position of the small square by clicking.
• ::-webkit-scrollbar-track-piece inner track, scroll bar middle section (remove)
• ::-webkit-scrollbar-corner Corner, where two scroll bars intersect
• ::-webkit-resizer A small control that is used to resize an element by dragging at the intersection of two scroll bars

• : Horizontal//horizontal Pseudo class applies to scroll bars in any horizontal direction: vertical//vertical Pseudo-class applies to any vertical scrollbar:d ecrement//decrement pseudo class for buttons and tracks Fragments. Represents a descending button or track fragment, such as an area and a button that can move the area up or to the right: the Increment//increment pseudo-class applies to button and track fragments. Represents an incremented button or track fragment, such as an area and a button that can move a region down or to the left: the start//start Pseudo class applies To button and track fragments. Indicates whether the object (Button track fragment) is placed in front of the slider: the end//end pseudo-class applies to button and track fragments. Indicates whether the object (Button track fragment) is placed behind the slider:d Ouble-button//double-button Pseudo-class applies to button and track fragments. Determines whether the position of the end of the track is a pair of buttons.    That is, the track fragment is next to a pair of buttons. : Single-button//single-button Pseudo class applies To button and track fragments. Determines whether the position of the end of the track is a button.    That is, the orbital fragment is next to a separate button.    : No-button No-button Pseudo-class indicates that there is no button at the end of the track.    : Corner-present//corner-present Pseudo-class indicates whether a corner of a scrollbar exists.    : Window-inactive//Applies to all scrollbars, indicating the area containing the scrollbar, when the focus is not in the window. ::-webkit-scrollbar-track-piece:start{/*Upper half or left half of scroll bar*/}::-webkit-scrollbar-thumb:window-inactive{/*when the focus is not in the state of the current region slider*/}::-webkit-scrollbar-button:horizontal:decrement:hover{/*The state of the button on the bottom of the horizontal scroll bar when the mouse*/}

• Effect Show

• Original address: http://blog.csdn.net/hanshileiai/article/details/40398177

Custom navigation Bar