How to set scroll bar in css? Detailed examples of how to set css scroll bars

In the design of web pages, the design of scroll bars is very necessary, so that when the text or picture exceeds the container size, the scroll bar style will appear. So, how to set the scroll bar in CSS? Next, let me tell you how to set the CSS scroll bar.

First of all, let’s take a look at the properties that may be needed to set the scroll bar in CSS.

1. overflow-y: Set how to manage the content when the content of the object exceeds its specified height; overflow-x: Set how to manage the content when the content of the object exceeds its specified width

Parameters:

visible: expand the area to display all content
auto: add scroll bars only when the content exceeds the limit value
hidden: always hide the scroll bar
scroll : Always display the scroll bar

2. Height: Set the height of the scroll bar (just modify the subsequent value).

3. Scroll bar color parameter setting:

scrollbar-3d-light-color Sets or retrieves the scroll bar bright border color
scrollbar-highlight-color Sets or retrieves the scroll bar 3D interface The color of the bright edge (ThreedHighlight)
scrollbar-face-color Sets or retrieves the color of the scroll bar 3D surface (ThreedFace)
scrollbar-arrow-color Sets or retrieves the color of the scroll bar direction arrow
scrollbar-shadow -color Set or retrieve the color of the dark edge (ThreedShadow) of the scroll bar 3D interface
scrollbar-dark-shadow-color Set or retrieve the color of the dark edge (ThreedDarkShadow) of the scroll bar
scrollbar-base-color Set or retrieve the scroll bar Base color

Next let’s look at css to set the scroll bar style.

In the html page we can define the scroll bar of the entire page like this.

*{
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 to hide the scroll bar after setting it in CSS (horizontally, vertically)

Many people say to use overflow-y: Hiddencss can hide the scroll bar, but it can only target div elements and cannot hide the browser, and some information says Add scroll="no" to to hide the scroll bar; add style="overflow-x:hidden" to to hide the horizontal scroll bar; add 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: refers to when the browser window width or height is larger than the page When the width or height is high, the scroll bar is not displayed; otherwise, the scroll bar 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 on the page

<style>html {
 overflow-x:hidden; //隐藏水平滚动条
 overflow-y:hidden;//隐藏垂直滚动条
 }
 </style>

Related recommendations:

css fixed div head does not scroll with the scroll bar

css layer scroll bar_Experience exchange

The above is the detailed content of How to set scroll bar in css? Detailed examples of how to set css scroll bars. For more information, please follow other related articles on the PHP Chinese website!