May 04, 2021 CSS
Many friends in the web design to customize the scroll bar style scenario, scroll bar style we can control through css, such as NetEase mailbox scroll bar looks good, is the use of CSS to set the implementation. B ut how should css-controlled scroll bars be implemented and hidden? C an the scroll bar change color or look better? H ere's a pass to tell you.
Before you begin this section, you can review the contents of the CSS overflow property.
1,
overflow-y
set how to manage content when the content of an object exceeds its specified height,
overflow-x
how to manage content when the content of an object exceeds its specified width.
Parameters:
visible
Expand the area to display everything
auto
Add scroll bars only if the content exceeds the limit
hidden
Always hides the scroll bar
scroll
Always displays a scroll bar
2,
height
the height of the scroll bar (modify the values after that).
3, scroll bar color parameters:
scrollbar-3d-light-color
or retrieves the color of the scroll bar's bright border
scrollbar-highlight-color
sets or retrieves the Bright Edge color of the scroll bar's 3D interface
scrollbar-face-color
sets or retrieves the color of the scroll bar 3D surface
scrollbar-arrow-color
the color of the scroll bar direction arrow
scrollbar-shadow-color
sets or retrieves the dark side color of the scroll bar's 3D interface
scrollbar-dark-shadow-color
sets or retrieves the color of the scroll bar Dark Shadow
scrollbar-base-color
or retrieves the scroll bar reference color
*
overflow-y:hidden
can hide scroll bars, but only for div elements, can not hide the
style="overflow-x:hidden"
and some information said that the addition of scrolls in the
scroll="no"
can hide
style="overflow-y:hidden"
the scroll bar;
1, completely hidden
Add scroll
scroll="no"
hide the scroll bar;
2. Hide when you don't need it
Means that 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; On the other hand, it is displayed;
3, style sheet method
Add style to
style="overflow-x:hidden"
hide the horizontal scroll bar;
Add
style="overflow-y:hidden"
to hide the vertical scroll bar.
body{ overflow-x:hidden; Not under standard DTD
html { overflow: scroll; }
The final solution:
Add on the page:
<style>
HTML {Overflow-x: hidden; // Hidden horizontal scroll bar overflow-y: hidden; // Hide vertical roll bar}
</style>
::-webkit-scrollbar {
width: 15px;
} / * This is for the default style (must) * /
::-webkit-scrollbar-track {
background-color: #b46868;
} / * Slolboard slide background color * /
::-webkit-scrollbar-thumb {
background-color: rgba(0, 0, 0, 0.2);
} / * Slider color * /
::-webkit-scrollbar-button {
background-color: #7c2929;
} / * Slide line two-head listening button color * /
::-webkit-scrollbar-corner {
background-color: black;
} / * The horizontal scroll bar and the longitudinal scroll bar intersect the colors of the sharp corners * /
<link rel="stylesheet" href="js/malihu-custom-scrollbar-plugin/jquery.mCustomScrollbar.min.css">
<!-- latest jQuery direct from google's CDN -->
<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="js/jquery-migrate-1.2.1.min.js"></script>
<script src="js/malihu-custom-scrollbar-plugin/jquery.mCustomScrollbar.concat.min.js"></script>
<script>
if (!$.browser.webkit) {
$.mCustomScrollbar.defaults.scrollButtons.enable=true; //enable scrolling buttons by default
$.mCustomScrollbar.defaults.axis="yx"; //enable 2 axis scrollbars by default
$(".container").mCustomScrollbar({theme:"dark"});
}
</script>
.uicss-cn
{
height:580px;overflow-y: scroll;
scrollbar-face-color:#EAEAEA;
scrollbar-shadow-color:#EAEAEA;
scrollbar-highlight-color:#EAEAEA;
scrollbar-3dlight-color:#EAEAEA;
scrollbar-darkshadow-color:#697074;
scrollbar-track-color:#F7F7F7;
scrollbar-arrow-color:#666666;
}