Home > Developer > CSS

An introduction to the attribute knowledge and style classification of Css:scrollbar

Source: Internet
Author: User
Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞
ScrollBar is also a very common code in CSS. Let's introduce it to 1. Overflow settings when content overflows (sets whether the object is set to show scroll bars)
Overflow-x settings when the content overflows horizontally
Overflow-y settings for vertical content overflow
The values for the above three properties are visible (default), scroll, hidden, auto.
2. Scrollbar-3d-light-color color of the solid scrollbar (sets the color of the scroll bar)
Scrollbar-arrow-color the color of the triangular arrows on the top and bottom buttons
Scrollbar-base-color basic color of scroll bars
Scrollbar-dark-shadow-color the color of the strong shadow of a solid scroll bar
Scrollbar-face-color color of the protruding portion of a solid scrollbar
Scrollbar-highlight-color the color of the blank part of the scroll bar
Scrollbar-shadow-color the color of the stereoscopic scrollbar Shadow 86oo wonderful tutorial
We use several examples to illustrate the above style attributes:
1. Let the browser window never appear scroll bar
No horizontal scroll bar 

<body style= "Overflow-x:hidden" >


No vertical scroll bar

<body style= "Overflow-y:hidden" >


No scroll bar

<body style= "Overflow-x:hidden;overflow-y:hidden" >

Or

<body style= "Overflow:hidden" > Http://www.o.com

2. Set scroll bars for multiline text boxes
No horizontal scroll bar

<textarea style= "Overflow-x:hidden" ></textarea>

No vertical scroll bar

<textarea style= "Overflow-y:hidden" ></textarea>

No scroll bar

<textarea style= "Overflow-x:hidden;overflow-y:hidden" ></textarea>

Or

<textarea style= "Overflow:hidden" ></textarea>

3. Set the color of the window scroll bar
Sets the color of the window scroll bar to red <body style= "scrollbar-base-color:red" >
Scrollbar-base-color set is the basic color, in general, only need to set this property can be changed to change the scroll bar color.
Add a bit of special effect:

<body style= "Scrollbar-arrow-color:yellow;scrollbar-base-color:lightsalmon" >


4. Define a class in the style sheet file and call the style sheet.

<style>. Coolscrollbar{scrollbar-arrow-color:yellow;scrollbar-base-color:lightsalmon;} </style>

This is called:

<textarea class= "Coolscrollbar" ></textarea> scrollbar-face-color for the scroll bar surface color setting; The Scrollbar-highlight-color is the color setting for the bevel and left bevel of the scrollbar, and the scrollbar-shadow-color for the bottom bevel and the right bevel of the scroll bar; The Scrollbar-3dlight-color is the edge color setting for the top and left edges of the scrollbar, and the Scrollbar-arrow-color for the scroll bar arrowhead color. The Scrollbar-track-color is set for the scroll bar backplane color, Scrollbar-darkshadow for the bottom and right edge of the scrollbar.

Example:

Body {background-color: #ffffff; color: #336699; Scrollbar-face-color: #BED8EB; Scrollbar-shadow-color: #DDF8FF; Scrollbar-highlight-color: #92C0D1; Scrollbar-3dlight-color: #DDF8FF; Scrollbar-darkshadow-color: #92C0D1; Scrollbar-track-color: #BED8EB; Scrollbar-arrow-color: #92C0D1}

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

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

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

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

    Open a Ticket

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

    Learn More