Home > Developer > Web Develop
Webpage scroll bar design and webpage scroll bar Design
1. settings for Overflow content Overflow
Overflow horizontal and vertical content overflow settings & nbsp;
Settings for overflow-x horizontal content overflow & nbsp;
Settings for overflow-y vertical content overflow
The values of the preceding three attributes are visible, scroll, hidden, and auto.
Visible default value. When this value is used, regardless of the configured "width" and "height"
And the content is forcibly displayed no matter whether it is out of the range or not. & Nbsp;
The effect of hidden is opposite to that of visible. Anything that exceeds "width" and "height"
Invisible. & Nbsp;
Scroll displays the scroll bar no matter whether the content is out of range or not. & Nbsp;
Auto displays the scroll bar when the content is out of the range. Otherwise, the scroll bar is not displayed.
Application:
No horizontal scroll bar:
<Div style = "overflow-x: hidden"> test </div>
No vertical scroll bars & nbsp;
<Div style = "overflow-y: hidden"> test </div>
No scroll bars & nbsp;
<Div style = "overflow-x: hidden; overflow-y: hidden" or
Style = "overflow: hidden"> test </div>
Automatically display the scroll bar
<Div
Style = "height: 100px; width: 100px; overflow: auto;"> test </di
V>
2. Define the color of the scroll bar.
The default scroll bar style is shown in the left image below. The right image is 1600 times larger.
Child, we can see that the scroll bar has several combinations of statements and responsibilities. I marked them with seven numbers,
Note that the css annotation code is placed after the following css code.
The two asterisks in the two slashes, such as:/* The annotated code here */
Body {
Scrollbar-arrow-color: # f4ae21;/* arrow color */
Scrollbar-face-color: #333;/* color of the three-dimensional scroll bar */
Scrollbar-3dlight-color: #666;/* three-dimensional scroll bar bright side of the face
Color */
Scrollbar-highlight-color: #666;/* For the blank area of the scroll bar
Color */
Scrollbar-shadow-color: #999;/* color of the shadow of a three-dimensional scroll bar
Color */
Scrollbar-darkshadow-color: #666;/* strong shade of the three-dimensional scroll bar
The color of the shadow */
Scrollbar-track-color: #666;/* stereo scroll bar background color */
Scrollbar-base-color: # f8f8f8;/* Basic color of the scroll bar */
Cursor: url (mouse. cur);/* Custom mouse */
}
The preceding two items are applicable to <body>, <div>, <textarea>, and <iframe>
<Html>
<Head>
<Meta http-equiv = "Content-Language" content = "zh-cn">
<Meta http-equiv = "Content-Type" content = "text/html;
Charset = gb2312 ">
<Title> Use CSS to control the scroll bar style </title>
<STYLE>
BODY {
}
</STYLE>
</Head>
<Body>
<P> & nbsp; </p>
</Body>
</Html>
Use a large div to include the two divs. The large div is fixed in width!
For example:
<Div style = "width: 1000px; height: auto;">
<Div style = "width: 200px; height: 500px; float: left;"> </div>
<Div style = "width: 790px; height: 500px; float: right;"> </div>
</Div>
If the screen does not have a PX width, a scroll bar will appear in the left and right directions, because a large div with an absolute value of PX is blocked outside, and the big div is fixed, the div in it will not be affected, so parents will protect their children! Haha
In the webpage design, I split the webpage. How can I remove the scroll bars on the homepage?
<Body scroll = no>
Remove the horizontal scroll bar:
<Body style = "overflow-x: hidden">
Remove the vertical scroll bar:
<Body style = "overflow-y: hidden">
Hide the horizontal scroll bar and display the vertical scroll bar:
<Body style = "overflow-x: hidden; overflow-y: scroll">
Hide all
<Body style = "overflow: hidden">
Or
<Body scroll = "no">
Attributes of the scroll bar:
Overflow-y: visible | auto | hidden | scroll
Visible: Do not cut the content or add a scroll bar.
Auto: Cut the content and add a scroll bar as needed
Hidden: Do not display content that exceeds the object height. This attribute is not described here. If you like it, try it yourself.
Scroll: always display the vertical 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
