[分享]css3控制滚动条样式

CSS3控制滚动条样式的方法 滚动条在网页中起到了很重要的作用，但默认情况下浏览器自带的滚动条样式可能并不适合网页的设计，这时候我们可以利用CSS3来控制滚动条的样式。 一、控制滚动条的样式 为了让滚...

CSS3控制滚动条样式的方法
滚动条在网页中起到了很重要的作用，但默认情况下浏览器自带的滚动条样式可能并不适合网页的设计，这时候我们可以利用CSS3来控制滚动条的样式。
一、控制滚动条的样式 为了让滚动条更加适合网页的风格，我们可以对滚动条的颜色、宽度、样式等进行自定义。下面是一个例子，使滚动条变成红色、6px宽、圆角的实心样式：

/* Webkit浏览器 */ 
::-webkit-scrollbar {
    width: 6px;  
}
::-webkit-scrollbar-track-piece {  
    background-color: #f5f5f5;  
    border-left: solid 1px #d2d2d2;
}
::-webkit-scrollbar-thumb:vertical {  
    height: 100px; /* 滚动条高度 */  
    background-color: #ff0000; /* 滚动条颜色 */  
    border: none;  
    border-radius: 3px; /* 滚动条圆角 */  
} 

二、隐藏滚动条 如果我们希望不显示滚动条本身而仅仅使用滑动功能，可以使用以下CSS代码：

/* Webkit浏览器 */ 
::-webkit-scrollbar {
    display:none;
} 

三、滚动条样式的兼容性 需要注意的是，控制滚动条的CSS属性并不是在所有浏览器中都支持的。上面的代码只会对webkit内核的浏览器生效，如果想让其在其他浏览器中生效，需要为每种浏览器单独编写样式。
总结： 通过CSS3我们可以控制滚动条的样式，使其更符合网页设计风格。但需要注意的是，这些CSS属性在各浏览器中的支持程度不同，需要进行兼容性处理。