CSS Change scroll bar style

Source: Internet
Author: User

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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.