一、CSS修改滚动条的样式
修改滚动条的样式可以通过CSS的::-webkit-scrollbar伪元素或者 scrollbar-width 属性实现。以下是单独使用::-webkit-scrollbar的示例：
/* 隐藏滚动条 */
::-webkit-scrollbar {
display: none;
}
/* 修改滚动条背景色 */
::-webkit-scrollbar {
background-color: #F5F5F5;
}
/* 修改滚动条宽度 */
::-webkit-scrollbar {
width: 12px;
}
/* 修改滚动条滑块颜色 */
::-webkit-scrollbar-thumb {
background-color: #999;
}
以上代码中，::-webkit-scrollbar代表整个滚动条，::-webkit-scrollbar-thumb代表滑块，可以通过这两个伪元素完成滚动条的样式修改。如需同时修改滚动条样式和滑块样式，可以参考以下示例：
/* 修改滚动条和滑块背景颜色 */
::-webkit-scrollbar {
background-color: #F5F5F5;
width: 12px;
}
::-webkit-scrollbar-thumb {
background-color: #999;
}
二、CSS改变滚动条颜色
在修改滚动条样式的基础上，可以使用CSS的color属性来进一步改变滚动条的颜色。以下是示例代码：
/* 改变滚动条颜色 */
::-webkit-scrollbar {
background-color: #F5F5F5;
width: 12px;
color: #999;
}
其中color属性用于修改滚动条的前景色，即滑块的颜色。
三、修改滚动条样式
除了修改颜色以外，还可以通过background-image等属性来修改滚动条的样式，例如：
/* 改变滚动条样式 */
::-webkit-scrollbar {
background-color: #F5F5F5;
width: 12px;
background-image: -webkit-linear-gradient(#fff, #ddd);
}
这里使用了background-image属性和-webkit-linear-gradient属性值，将滚动条的背景设为一个渐变色。
四、CSS修改滚动条的位置
修改滚动条的位置可以分为两种情况，一种是垂直滚动条，另一种是水平滚动条。
对于垂直滚动条，可以使用CSS的::-webkit-scrollbar-track-piece伪元素来实现。以下是示例代码：
/* 修改垂直滚动条位置 */
::-webkit-scrollbar-track-piece {
width: 12px;
background-color: #F5F5F5;
position: absolute;
right: 0;
top: 0;
bottom: 0;
}
以上代码中，通过将::-webkit-scrollbar-track-piece设为绝对定位，并设置right、top和bottom属性，将滚动条放置于右侧。
对于水平滚动条，同样可以使用::-webkit-scrollbar-track-piece伪元素，只需要将属性值设置为bottom、left和right即可。以下是示例代码：
/* 修改水平滚动条位置 */
::-webkit-scrollbar-track-piece {
height: 12px;
background-color: #F5F5F5;
position: absolute;
left: 0;
bottom: 0;
right: 0;
}
五、CSS加滚动条
有时，我们需要的是在没有滚动条的情况下添加一个滚动条。这可以通过使用CSS3的overflow属性和::-webkit-scrollbar伪元素来实现。以下是示例代码：
/* 添加滚动条 */
div {
height: 200px;
overflow: scroll;
-webkit-overflow-scrolling: touch;
}
/* 修改滚动条样式 */
div::-webkit-scrollbar {
width: 12px;
}
div::-webkit-scrollbar-thumb {
background-color: #999;
}
以上代码中，首先通过overflow属性将元素设为可滚动，并通过-webkit-overflow-scrolling: touch;提高移动设备上滚动的流畅度。然后，通过标签选择器和::-webkit-scrollbar伪元素来修改滚动条的样式。
六、CSS修改滚动条放在屏幕的下方
有时，为了更好地适应页面布局，我们希望将滚动条放置在屏幕底部，以下是示例代码：
/* 将滚动条放在屏幕底部 */
::-webkit-scrollbar {
position: fixed;
z-index: 100;
bottom: 0;
width: 100%;
height: 12px;
}
::-webkit-scrollbar-thumb {
background-color: #999;
}
以上代码中，将::-webkit-scrollbar设为固定定位，并将bottom属性设为0，即可将滚动条放置在屏幕底部。同时，通过设置z-index属性，可以避免滚动条被其它元素遮挡。
七、火狐CSS修改滚动条样式
除了webkit内核的浏览器，火狐也提供了修改滚动条样式的方法，只需要使用::-moz-scrollbar伪元素即可。以下是示例代码：
/* 修改火狐滚动条样式 */
div::-moz-scrollbar {
width: 12px;
}
div::-moz-scrollbar-thumb {
background-color: #999;
}
八、CSS修改滚动条静止的时候隐藏
有时，我们希望在滚动停止时隐藏滚动条，可以使用<body>元素的scroll事件和CSS的visibility属性来实现，以下是示例代码：
/* 隐藏滚动条 */
body::-webkit-scrollbar {
width: 12px;
height: 12px;
visibility: hidden;
}
body::-webkit-scrollbar-thumb {
background-color: #999;
}
/* 显示滚动条 */
body.scroll-finished::-webkit-scrollbar {
width: 12px;
height: 12px;
visibility: visible;
}
以上代码中，首先将::-webkit-scrollbar和::-webkit-scrollbar-thumb的visibility属性设为hidden，当滚动停止时，通过<body>元素的scroll事件将其设为visible即可。
九、CSS修改滚动条位置现是在指定位置
有时，我们需要将滚动条放置在页面的特定位置，这可以通过设置滚动容器的padding属性来实现。以下是示例代码：
/* 在指定位置放置滚动条 */
div {
height: 200px;
overflow: scroll;
padding-right: 12px;
}
div::-webkit-scrollbar {
width: 12px;
}
div::-webkit-scrollbar-thumb {
background-color: #999;
}
以上代码中，通过设置div元素的padding-right属性，将滚动条放置在容器的右侧。注意，padding-right的值应该与::-webkit-scrollbar的width属性相等。
十、CSS滚动条样式选取
除了以上介绍的几种滚动条样式以外，还有很多种滚动条样式可供选择。以下是选取的三种滚动条样式：
1、仿Mac OS滚动条样式
::-webkit-scrollbar {
width: 8px;
height: 8px;
background-color: #fff;
}
::-webkit-scrollbar-thumb {
border-radius: 6px;
background-color: #ccc;
-webkit-box-shadow: inset 0 0 0 1px #fff;
}
::-webkit-scrollbar-thumb:hover {
background-color: #999;
-webkit-box-shadow: inset 0 0 0 1px #fff;
}
2、iOS滚动条样式
::-webkit-scrollbar {
width: 5px;
height: 5px;
}
::-webkit-scrollbar-thumb {
background-color: rgba(0, 0, 0, 0.3);
}
::-webkit-scrollbar-thumb:vertical {
border-radius: 3px;
}
::-webkit-scrollbar-thumb:horizontal {
border-radius: 3px;
}
3、自定义滚动条样式
::-webkit-scrollbar {
width: 8px;
background-color: #fff;
}
::-webkit-scrollbar-thumb {
background-color: #ccc;
border-radius: 10px;
-webkit-box-shadow: inset 0 0 0 1px #fff;
}
::-webkit-scrollbar-thumb:hover {
background-color: #999;
-webkit-box-shadow: inset 0 0 0 1px #fff;
}
::-webkit-scrollbar-thumb:active {
background-color: #666;
}
以上是使用webkit内核浏览器的示例，对于其他浏览器，可以调整对应样式实现滚动条的修改。
