What are the properties that css may need to set the scroll bar
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!
