CSS Change scroll bar style

1. 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

2. scroll bar Style modification

1 /*scroll bar does not appear when you touch a scroll bar do not want to appear to be so*/2 #content_right::-webkit-scrollbar{3 Display:None;4}
/* Style Change code-----------------------------------------------------*/5 /*scroll bar integral part*/6 . Topnav_box::-webkit-scrollbar7{8 width:10px;9 Height:10px;Ten Background-color:#d0cdc7; One} A /*Scroll Track Background*/ - . Topnav_box::-webkit-scrollbar-track -{ the -webkit-box-shadow:inset 0 0 6px rgba (0,0,0,0.3); - Border-radius:10px; - Background-color:#d0cdc7; -} +  - /*a small block that can be moved up or down in a scrollbar.*/ + . Topnav_box::-webkit-scrollbar-thumb A{ at Border-radius:10px; - -webkit-box-shadow:inset 0 0 6px rgba (0,0,0,.3); - Background-color:#a09d9d; -}

/* Style Change code-----------------------------------------------------*/

This class is used if the page element has a scroll bar.

Html:

<ul id= "Treemx" class= "Ztree topnav_box" ></ul>

CSS: At the same time CSS to have scrolling code

Ul.ztree {margin-top: 10px; border-top: 0; background: white ; width: 100%;        height :  330px;         overflow-y: auto; overflow-x: auto; Auto appears for auto-scroll as always appears }

　

CSS Change scroll bar style