Html scroll bar style _ basic tutorial

Source: Internet
Author: User
The code for implementing the effects of the scroll bar on the page is fully organized and detailed. 1. The track of the scroll bar is recorded as scrollbar-track. The so-called "track" refers to the route that must be taken when the sliding block of the scroll bar is running. 2. Slide Block of the scroll bar, that is, the sliding block that can be moved up or down or left, and the small square at both ends of the scroll bar are pressed on it and recorded as scrollbar-face. Face is the "face" of the scroll bar. Note that there are three "faces": slide bars and small blocks at both ends.
3. Specify scrollbar-highlight as the highlighted border of the scroll bar. This highlighted border has the same concept as the highlighted border of the table, that is, the left and top sections. The highlighted border section of the scroll bar refers to the "face" of the scroll bar (that is, sliding block and two small blocks).
4. the outer side of the bright border of the scroll bar has a three-dimensional modification part, which is recorded as a scrollbar-3dlight. 3d is the three-dimensional meaning. It will surround the outside of the bright border of the scroll bar.
5. The shadow part of the scroll bar refers to the shadow of the main slider and two blocks on the left and bottom left. It is recorded as scrollbar-shadow.
6. The shadow part of the scroll bar also has a strong shadow part, which is recorded as scrollbar-darkshadow, which is surrounded by the outside of the Shadow part.
7. The two sides of the scroll bar are marked with arrows as scrollbar-arrow. The arrows are downward, upward, left, and right.

<P id = "center_down" style = "overflow: auto; height: 50; scrollbar-face-color: # f1f1f1; scrollbar-shadow-color: # ffffff; scrollbar-highlight-color: # ffffff; scrollbar-3dlight-color: # ffffff; scrollbar-darkshadow-color: # ffffff; scrollbar-track-color: # dddddddd; scrollbar-arrow-color: #477ED1 "> </p>
[Ctrl + A select all Note: If you need to introduce external Js, You need to refresh it to execute]

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.