默认的页面滚动条很丑，很多情况下和页面风格完全不搭；也见到很多网站漂亮的滚动条，其实是隐藏掉默认的滚动条，然后自定义div和css,作出自己的滚动条，再配合js实现拖动和鼠标滚轮效果。 (Hiding the scrollbar on an HTML page，but still being able to scroll)
该修饰可以去掉div上的滚动条，div中的内容依然可以滚动，该属性只支持-webkit-内核的浏览器，像Chrome,Safari,Opera,Android Browser，Chrome for Android。 IE Edge FireFox不支持。
content {
/* These rules create an artificially confined space, so we get
a scrollbar that we can hide. They are not part of the hiding itself. */
border: 1px dashed gray;
padding: .5em;
white-space: pre-wrap;
height: 5em;
overflow-y: scroll;}
.content::-webkit-scrollbar {
/* This is the magic bit */
display: none;}
<div class='content'>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris eu
urna et leo aliquet malesuada ut ac dolor. Fusce non arcu vel ligula
fermentum sodales a quis sapien. Sed imperdiet justo sit amet venenatis
egestas. Integer vitae tempor enim. In dapibus nisl sit amet purus congue
tincidunt. Morbi tincidunt ut eros in rutrum. Sed quam erat, faucibus
vel tempor et, elementum at tortor. Praesent ac libero at arcu eleifend
mollis ut eget sapien. Duis placerat suscipit eros, eu tempor tellus
facilisis a. Vivamus vulputate enim felis, a euismod diam elementum
non. Duis efficitur ac elit non placerat. Integer porta viverra nunc,
sed semper ipsum. Nam laoreet libero lacus.
Sed sit amet tincidunt felis. Sed imperdiet, nunc ut porta elementum,
eros mi egestas nibh, facilisis rutrum sapien dolor quis justo. Quisque
nec magna erat. Phasellus vehicula porttitor nulla et dictum. Sed
tincidunt scelerisque finibus. Maecenas consequat massa aliquam pretium
volutpat. Duis elementum magna vel velit elementum, ut scelerisque
odio faucibus.
</div>
效果是这样的：
IE5.5+ 默认的滚动条样式：
body, html { /* these are default, can be replaced by hex color values */
scrollbar-base-color: aqua;
scrollbar-face-color: ThreeDFace;
scrollbar-highlight-color: ThreeDHighlight;
scrollbar-3dlight-color: ThreeDLightShadow;
scrollbar-shadow-color: ThreeDDarkShadow;
scrollbar-darkshadow-color: ThreeDDarkShadow;
scrollbar-track-color: Scrollbar;
scrollbar-arrow-color: ButtonText;
}
后来微软还加了前缀-ms-但是还是没有得到W3C的认可。
::-webkit-scrollbar {} /* 1 */
::-webkit-scrollbar-button {} /* 2 */
::-webkit-scrollbar-track {} /* 3 */
::-webkit-scrollbar-track-piece {} /* 4 */
::-webkit-scrollbar-thumb {} /* 5 */
::-webkit-scrollbar-corner {} /* 6 */
::-webkit-resizer {} /* 7 */
Mozilla 也做了一下操作滚动条的扩展，但是都不推荐使用
-moz-scrollbars-none 推荐用overflow:hidden替代这玩意
-moz-scrollbars-horizontal 和overflow-x类似
-moz-scrollbars-vertical 和overflow-y类似
-moz-hidden-unscrollable //Only works internally within a users profile settings. Disables scrolling XML root elements and disables using arrow keys and mouse wheel to scroll web pages.
隐藏滚动条可以用一个父元素包裹，内部子元素设置padding-right将滚动条顶出去。
webkit美化滚动条的例子：
.resText{
overflow: auto;
width: 300px;
height:200px;
background-color: #e2e2e2;
}
.resText>p{
color:#333;
font-size: 14px;
line-height: 23px;
padding: 5px 10px;
}
/* Let's get this party started */
.resText::-webkit-scrollbar {
width: 8px;
}
/* Track */
.resText::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
-webkit-border-radius: 5px;
border-radius: 5px;
}
/* Handle */
.resText::-webkit-scrollbar-thumb {
-webkit-border-radius: 5px;
border-radius: 5px;
background: rgba(255,0,0,.8);
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
}
.resText::-webkit-scrollbar-thumb:window-inactive {
background: #b72525;
}
<div class="resText">
<p>
...省略一万字
</p>
</div>
效果：
网易云音乐的scrollbar
.u-scroll::-webkit-scrollbar {
width:8px;
height:8px
}
.u-scroll::-webkit-scrollbar-track {
border-radius:10px;
-webkit-box-shadow:inset 0 0 6px rgba(0,0,0,0)
}
.u-scroll::-webkit-scrollbar-track:hover {
-webkit-box-shadow:inset 0 0 6px rgba(0,0,0,0.4);
background-color:rgba(0,0,0,0.01)
}
.u-scroll::-webkit-scrollbar-track:active {
-webkit-box-shadow:inset 0 0 6px rgba(0,0,0,0.4);
background-color:rgba(0,0,0,0.05)
}
.u-scroll::-webkit-scrollbar-thumb {
background-color:rgba(0,0,0,0.05);
border-radius:10px;
-webkit-box-shadow:inset 1px 1px 0 rgba(0,0,0,.1)
}
.u-scroll:hover::-webkit-scrollbar-thumb {
background-color:rgba(0,0,0,0.2);
border-radius:10px;
-webkit-box-shadow:inset 1px 1px 0 rgba(0,0,0,.1)
}
.u-scroll::-webkit-scrollbar-thumb:hover {
background-color:rgba(0,0,0,0.4);
-webkit-box-shadow:inset 1px 1px 0 rgba(0,0,0,.1)
}
.u-scroll::-webkit-scrollbar-thumb:active {
background:rgba(0,0,0,0.6)
}