The method of setting Scroll Bar in css
Editor to share with you the method of setting scroll bars in css, I believe that most people do not know much about it, so share this article for your reference, I hope you can learn a lot after reading this article, let's go to know it!
First, let's take a look at the properties that css might need to set the scroll bar.
1. Overflow-y: sets how to manage content when the content of an object exceeds its specified height; overflow-x: sets how to manage content when the content of an object exceeds its specified width
Parameters:
Visible: expand the area to show everything
Auto: add scroll bars only if the content exceeds the limit
Hidden: always hide the scroll bar
Scroll: always show scroll bar
2. Height: set the height of the scroll bar (just change the value after that).
3. Scroll bar color parameter setting:
Scrollbar-3d-light-color sets or retrieves the bright border color of the scroll bar
Scrollbar-highlight-color sets or retrieves the bright edge (ThreedHighlight) color of the scroll bar 3D interface
Scrollbar-face-color sets or retrieves the color of the 3D surface (ThreedFace) of the scroll bar
Scrollbar-arrow-color sets or retrieves the color of the scroll bar direction arrow
Scrollbar-shadow-color sets or retrieves the dark edge (ThreedShadow) color of the scroll bar 3D interface
Scrollbar-dark-shadow-color sets or retrieves the scroll bar dark border (ThreedDarkShadow) color
Scrollbar-base-color sets or retrieves the scroll bar reference color
Second, let's take a look at css setting the scroll bar style.
In the html page, we can define the scroll bar for the entire page in this way.
* {
Scrollbar-3dlight-color:#D4D0C8
Scrollbar-highlight-color:#fff
Scrollbar-face-color:#E4E4E4
Scrollbar-arrow-color:#666
Scrollbar-shadow-color:#808080
Scrollbar-darkshadow-color:#D7DCE0
Scrollbar-base-color:#D7DCE0
Scrollbar-track-color:#
}
Finally, let's take a look at how css hides the scroll bar (horizontally and vertically).
Many people say that using overflow-y:hiddencss can hide the scroll bar, but only for div elements, not the browser, while some materials say that adding scroll= "no" to hide the scroll bar; adding style= "overflow-x:hidden" to hide the horizontal scroll bar; adding style= "overflow-y:hidden" to hide the vertical scroll bar.
1. Completely hide: add scroll= "no" to hide the scroll bar
2. Hide when not needed: when the width or height of the browser window is greater than the width or height of the page, the scroll bar is not displayed; otherwise, it is displayed.
3. Style sheet method:
Add style= "overflow-x:hidden" to hide the horizontal scroll bar
Add style= "overflow-y:hidden" to hide the vertical scroll bar.
Final hiding method:
Add to the page
Html {
Overflow-x:hidden;// hides the horizontal scroll bar
Overflow-y:hidden;// hides the vertical scroll bar
}
The above is all the contents of the article "how to set scroll bars in css". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!
