For a website with a certain special style, we often need to change the color and related settings of the scroll bar for the sake of appearance. So how can we use standard styles to control the scroll bar? After many attempts and summaries, we will briefly introduce the style sheet content that involves the browser scroll bar (some styles can be supported only by ie5.5 + ):
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 of the preceding three attributes are visible (default), scroll, hidden, and 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. 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">
2. 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>
3. Set the color of the window scroll bar
Set the color of the window scroll bar to red <body style = "scrollbar-base-color: red">
Scrollbar-base-color sets the basic color. Generally, you only need to set this attribute to change the color of the scroll bar.
Add a 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>
Call this method as follows:
<Textarea class = "coolscrollbar"> </textarea>
</
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
