Home > Developer > Web Develop
1,overflow Settings when content overflows
Overflow settings for horizontal and vertical content overflow
Overflow-x settings for horizontal content overflow
Overflow-y settings for vertical content overflow
The values for the above three properties are visible, scroll, hidden, auto
Visible default value. When you use this value, regardless of the set width and height
The value of which the content, whether or not out of range, is forced to be displayed.
The hidden effect is the opposite of visible. Any inside that exceeds "width" and "height"
will not be visible.
Scroll the scroll bar is displayed regardless of whether the content is beyond the range.
Auto displays scroll bars when content is out of range, otherwise it is not displayed.
Application:
No horizontal scroll bar:
<div style= "Overflow-x:hidden" >test</div>
No vertical scroll bar
<div style= "Overflow-y:hidden" >test</div>
No scroll bar
<div style= "Overflow-x:hidden;overflow-y:hidden" or
Style= "Overflow:hidden" >test</div>
Automatically show scroll bars
<div
Style= "Height:100px;width:100px;overflow:auto;" >test</di
V>
2. Define the color of the scroll bar yourself
We generally default scroll bar style as shown in the left image, the right is magnified 1600 times times the sample
Son, we can see that there are several interpellated combinations of scrollbars, and I marked them with 7 numbers,
Comment on the following CSS code, note that the CSS comment code is placed in the
Between two asterisks in two slashes, such as:/* Put the commented code here */
Body {
Scrollbar-arrow-color: #f4ae21; /* The color of the triangular arrows */
Scrollbar-face-color: #333; /* Color of the stereo scroll bar */
Scrollbar-3dlight-color: #666; /* Three-dimensional scroll bar bright side of Yan
Color */
Scrollbar-highlight-color: #666; /* The blank part of the scroll bar
Color */
Scrollbar-shadow-color: #999; /* Three-dimensional scroll bar shadow
Color */
Scrollbar-darkshadow-color: #666; /* Solid scroll bar Strong Yin
The color of the shadow * *
Scrollbar-track-color: #666; /* Stereo scroll bar background color */
Scrollbar-base-color: #f8f8f8; /* Basic color of scroll bar */
Cursor:url (mouse.cur); /* Custom Mouse */
}
The above 2 items apply to <body>, <div>, <textarea>, <iframe>
<meta http-equiv= "Content-language" content= "ZH-CN" >
<meta http-equiv= "Content-type" content= "text/html;
charset=gb2312 ">
<title> control the scrollbar style with CSS </title>
<STYLE>
BODY {
}
</STYLE>
<body>
<p> </p>
</body>
Design of Web page scroll bar
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
