Home > Others

Div scroll attributes

Source: Internet
Author: User
Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

Div scroll attributes are described in detail to create different scroll bars for the DIV layer.

1. scrollbar attributes and styles
 1. Set overflow content overflow (set whether the set object displays a scroll bar)
Settings for overflow-x horizontal content Overflow
Settings for overflow-y vertical content Overflow
The values set for the preceding three attributes are visible (default value), scroll (scroll bar appears), hidden (hidden), and auto (auto ).

2. scrollbar-3d-light-color three-dimensional scroll bar bright side color (set the color of the scroll bar)
Scrollbar-arrow-color the color of the upper and lower arrow of the buttons
Scrollbar-base-color Basic Color of the scroll bar
Scrollbar-Dark-shadow-color the color of the strong shadow of the three-dimensional scroll bar
Scrollbar-face-color of the protruding part of the stereo scroll bar
Scrollbar-Highlight-color the color of the blank area of the scroll bar
Scrollbar-shadow-color specifies the color of the shadow of a three-dimensional scroll bar.

We use several examples to explain the above style attributes:

1. Set the scroll bar of the multi-line text box

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>

2. Make the browser window never show a 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">

3. define a class in the style sheet file and call the style sheet.


This call:

Scrollbar-face-color specifies the surface color of the scroll bar;
Scrollbar-Highlight-color specifies the color of the top and left slopes of the scroll bar;
Scrollbar-shadow-color specifies the color of the lower and right slopes of the scroll bar;
Scrollbar-3Dlight-Color for the scroll bar top and left edge color settings;
Scrollbar-arrow-color indicates the color of arrows at both ends of the scroll bar.
Scrollbar-track-color is used to set the color of the scroll bar background;
Scrollbar-darkshadow sets the color of the bottom and right edge of the scroll bar.

Instance:

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
}

4. Set the color of the window scroll bar

set the color of the window scroll bar to Red
scrollbar-base-color The basic color is set. Generally, you only need to set this attribute to change the color of the scroll bar.
Add a special effect:

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.

Related Keywords:
elasticsearch scroll scroll divider scroll flags trackball scroll scroll vector cartoon scroll scroll divider

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.

What's Trending
Top 10 Tags
datastax versions naming convention zookeeper client class definition md5 microsoft sql server 2005 data structures exception handling error handling
Top 10 Keywords
microsoft download center down wordpress address url site address url wordpress address url windows installer 4 0 download 302 not found web address url definition site address url wordpress db2 integer mac os installation step by step pdf abbreviation for return

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