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

This article shares with you what properties are required for css scrollbars. Xiaobian thinks it is quite practical, so share it with everyone for reference. Let's follow Xiaobian and have a look.

First let's take a look at the properties that a CSS scrollbar might require.

overflow-y: Sets how content is managed when the content of an object exceeds its specified height;overflow-x: Sets how content is managed when the content of an object exceeds its specified width

Parameters:

visible: expands the area to show everything

auto: add scroll bar only if content exceeds limit

hidden: Always hide the scroll bar

scroll: always scroll

Height: Set the height of the scroll bar (modify the value after it).

3. Scroll bar color parameter setting:

scrollbar-3d-light-color Sets or retrieves the color of the scrollbar's bright border

scrollbar-highlight-color Sets or retrieves the color of the ThreedHighlight of the scrollbar 3D interface

scrollbar-face-color Sets or retrieves the color of the scrollbar 3D surface (ThreedFace)

scrollbar-arrow-color Sets or retrieves the color of the scroll bar direction arrow

scrollbar-shadow-color Sets or retrieves the color of the ThreedShadow of the scrollbar 3D interface

scrollbar-dark-shadow-color Sets or retrieves the color of the scroll bar's ThreedDarkShadow

scrollbar-base-color Sets or retrieves the scrollbar base color

Next, let's take a look at css setting scrollbar styles.

In html pages we can define scroll bars for 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 CSS scrollbar (horizontal, vertical)

Many people say that using overflow-y:hiddencss can hide the scroll bar, but only for div elements, and can not hide the browser, and some data say that add scroll="no" to hide the scroll bar; add style="overflow-x:hidden" to hide the horizontal scroll bar; add style="overflow-y:hidden" to hide the vertical scroll bar.

1, completely hidden: add scroll="no" in, you can hide the scroll bar;

2, hidden when not needed: refers to when the browser window width or height is greater than the width or height of the page, do not display the scroll bar; 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 page

html{

overflow-x:hidden;//hide horizontal scroll bar

overflow-y:hidden;//hide vertical scroll bar

}

Thank you for reading! About "css setting scroll bar may need what attributes" this article is shared here, I hope the above content can be of some help to everyone, so that everyone can learn more knowledge, if you think the article is good, you can share it to let more people see it!

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.