Shulou(Shulou.com)06/01 Report--

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!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.