Home > Developer > Web Develop
The scroll bar style mainly involves the following CSS properties:
Overflow property: Retrieves or sets how content is displayed when the object's content exceeds its specified height and width
Overflow:auto; The content is automatically added to the scroll bar when needed
Overflow:scroll; Always show scroll bars
Overflow-x: Hidden; Prohibit horizontal scroll bars
OVERFLOW-Y: scroll; Always show portrait scroll bar
width:568px; width:98%; Set the width of the area [pixels/percent, etc.]
height:120px; Set the height of the area [pixels/percent, etc.]
Scrollbar-face-color: The color of the bulge of the scroll bar
Scrollbar-highlight-color: The color of the blank part of the scroll bar
Scrollbar-shadow-color: Color of the solid scrollbar shadow
Scrollbar-3dlight-color: The color of the scroll bar's bright edges
Scrollbar-arrow-color: The color of the triangular arrows on the top and bottom buttons
Scrollbar-track-color: The background color of the scroll bar
Scrollbar-darkshadow-color: Color of the scroll bar strong shadow
Scrollbar-base-color: basic color of scroll bars
Remove scroll bars from Web pages：
Remove horizontal scroll bar: <body style= ' Overflow:scroll;overflow-x:hidden ' >
Remove vertical scroll bar: <body style= ' Overflow:scroll;overflow-y:hidden ' >
All two removed: <body scroll= "No" >
Box Plus in the scroll bar after Name= "" Add scrolling= "No"
1,overflow Settings when content overflows
Overflow settings for horizontal and vertical content overflow
Overflow-x settings when the content overflows horizontally
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
<divstyle= "Height:100px;width:100px;overflow:auto;" >test</div>
2. Define the color of the scroll bar yourself
We generally default scroll bar style as shown in the left, the right is magnified 1600 times times the appearance, we can see the scroll bar has several interpellated combinations, I gave them 7 numbers,
Comment on the following CSS code, note that the CSS comment code is placed in two slashes within the two asterisks, such as:
CSS settings scroll bar color and style and how to remove and hide scrollbars
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
