Example:
/* As the most front-end technology in the IT community, the style of each element on the page we must be serious, is the scroll bar we will not ignore. Let me share with you how to control the style of the scroll bar through CSS, the code is as follows://///* Define ScrollBar Track */ #style -2::-webkit-scrollbar-track { Background-color : #F5F5F5; -webkit-box-shadow:inset 0 0 6px rgba (0, 0, 0, 0.22); } /* Define scroll bar height and background */ #style -2::-webkit-scrollbar { width:10px ; Background-color:rgba (0, 0, 0, 0.34); } /* Define scroll bar * /#style -2::-webkit-scrollbar-thumb { background-color: #8b8b8b; border-radius:10px; }* To achieve content scrolling within a single p, there are three conditions to be met:
1, p must set a fixed height, can not use a percentage or auto and other elastic values.
2. The height of the content must exceed its own height.
3. The attribute "Overflow:auto" must be added.
* Hide scroll bar:
1, remove the horizontal direction of the scroll bar:
<body style= "Overflow-x:hidden" >
2, remove the vertical scroll bar:
<body style= "Overflow-y:hidden" >
3, hide the landscape, display vertical scroll bar:
<body style= "Overflow-x:hidden;overflow-y:scroll" >
4. Hide all scroll bars:
<body style= "Overflow:hidden" > or <body scroll= "no" >
A better way is to set the color of the scroll bar to be completely transparent, so that both the content can be scrolled, and the purpose of not displaying the scroll bar.
Application:
No horizontal scroll bar:
<p style= "Overflow-x:hidden" >test</p>
No vertical scroll bar
<p style= "Overflow-y:hidden" >test</p>
No scroll bar
<p style= "Overflow-x:hidden;overflow-y:hidden" or style= "Overflow:hidden" >test</p>
Automatically show scroll bars
<p style= "Height:100px;width:100px;overflow:auto;" >test</p>
Define the color of the scroll bar yourself, with the following code:
Body {scrollbar-arrow-color: #f4ae21;/* The color of the triangular Arrows */scrollbar-face-color: #333;/* The color */scrollbar-3dlight-color of the Stereoscopic scroll bar: # 666; /* Color of the solid scrollbar bright edge */scrollbar-highlight-color: #666; /* The color of the blank part of the scrollbar */scrollbar-shadow-color: #999; /* Color of the stereoscopic scrollbar Shadow */scrollbar-darkshadow-color: #666; /* The color of the strong shadow of the stereoscopic scroll bar */scrollbar-track-color: #666; /* Stereoscopic scroll bar background color */scrollbar-base-color: #f8f8f8; /* The basic Color */cursor:url (mouse.cur) of the scroll bar; /* Custom mouse */}The above 2 items apply to <body>, <p>, <textarea>, <iframe>
Report:
Explain the overflow properties and the different worth of effects:
overflow:visible; Do not cut content or add scroll bars. The default value. When you use this value, regardless of the value of the set "width" and "height", the contents of which will be forced to be displayed regardless of whether they are out of range.
Overflow:auto; cut the content and add scroll bars when needed.
Overflow:hidden; does not display content that exceeds the height of the object.
Overflow:scroll; always displays the vertical scroll bar.
Overflow settings for horizontal and vertical content overflow
Overflow-x settings when the content overflows horizontally
Overflow-y settings for vertical content overflow
The values set above are visible, scroll, hidden, auto
The hidden effect is the opposite of visible. Any content that exceeds the width and height will not be visible.
Scroll the scroll bar is displayed regardless of whether the content is beyond the range.
Summarize:
I believe that through the study of this article, small partners on the CSS control scroll bar style, have a further understanding and understanding, I hope that your work has helped!
Related recommendations:
CSS3 Examples of custom scroll bar styles
CSS setting div scroll bar Style example
html
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
