/* 设置滚动条的样式 */
::-webkit-scrollbar {
width: 7px;
height: 7px;
}
/* 设置滚动条的轨道颜色 */
::-webkit-scrollbar-track {
background: #eee;
}
/* 设置滚动条的滑块颜色 */
::-webkit-scrollbar-thumb {
background: #666;
}以上代码使用了WebKit浏览器的伪类选择器“::-webkit-scrollbar”，针对滚动条的轨道和滑块分别设置了样式。其中，“width”和“height”属性控制滚动条的宽度和高度，而“background”属性则控制轨道和滑块的颜色。
在使用CSS3实现滚动条的样式时，需要结合使用JavaScript来控制滚动条的行为。下面的代码演示了如何通过JavaScript获取页面元素的滚动位置，并根据滚动位置调整滚动条的位置：
/* 监听滚动事件 */
document.getElementById("myDiv").addEventListener("scroll", function(){
/* 获取滚动位置 */
var scrollTop = this.scrollTop;
/* 计算滚动位置占比 */
var ratio = scrollTop / this.scrollHeight;
/* 获取滚动条元素 */
var scrollbar = document.getElementById("myScrollbar");
/* 计算滚动条位置 */
var top = Math.floor(ratio * (this.offsetHeight - scrollbar.offsetHeight));
scrollbar.style.top = top + "px";
});以上代码通过“addEventListener”方法监控页面元素的滚动事件，随着滚动位置的变化，计算出滚动条的位置，并通过“style.top”属性设置滚动条的位置。
最后，大家将CSS样式和JavaScript代码结合起来，实现一个简单的自定义滚动条：
/* CSS样式 */
#myDiv {
overflow: auto;
position: relative;
width: 300px;
height: 200px;
}
#myScrollbar {
position: absolute;
right: 0;
top: 0;
width: 7px;
height: 50px;
background: #666;
border-radius: 3px;
transition: top .2s;
}
/* JavaScript代码 */
document.getElementById("myDiv").addEventListener("scroll", function(){
var scrollTop = this.scrollTop;
var ratio = scrollTop / this.scrollHeight;
var scrollbar = document.getElementById("myScrollbar");
var top = Math.floor(ratio * (this.offsetHeight - scrollbar.offsetHeight));
scrollbar.style.top = top + "px";
});
/* HTML代码 */在上例中，大家定义了一个名为“myDiv”的页面元素作为容器，它的“overflow”属性设置为“auto”，以开启滚动条功能。同时，大家也定义了一个名为“myScrollbar”的元素来充当滚动条，并通过“position: absolute”属性将其定位到滚动容器的右上角。
有了上述的CSS样式和JavaScript代码，大家现在已经可以轻松地实现一个自定义的滚动条了。只需要在页面中加入相应的HTML标记，即可创建一个美观实用的滚动条。