利用div+jquery自定义滚动条样式的2种方法

可能出于演示的需要，这个问题的格式不够规范，我先做一些处理再回答：

详细讲解 "利用 div + jQuery 自定义滚动条样式的 2 种方法" 的完整攻略

引言

使用自定义滚动条可以让你的网站看上去更现代化，在提高用户体验的同时也可以增强网站风格的统一性。本文将会详细讲解两种方法：

1. 利用 ::-webkit-scrollbar 伪元素（需要使用 -webkit- 前缀）；
2. 利用 jQuery 插件，如 niceScroll。

利用 ::-webkit-scrollbar 伪元素

WebKit 为滚动条提供了 ::-webkit-scrollbar 伪元素，可以通过 CSS 设置其样式。

对于垂直滚动条（水平滚动条同理），我们可以设置以下样式：

::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: #555;
}

这里：

• ::-webkit-scrollbar 设置滚动条的宽度；
• ::-webkit-scrollbar-track 设置滚动条的背景，即轨道；
• ::-webkit-scrollbar-thumb 设置滚动条的前景，即滑块；
• ::-webkit-scrollbar-thumb:hover 设置滑块被鼠标悬停时的背景颜色。

你可以根据自己的需要调整这些 CSS 属性的值。

## 利用 jQuery 插件

如果你希望更加自定义的滚动条, 你可以使用一些 jQuery 插件。

例如，niceScroll 插件可以帮助你快速生成具有良好 UX 的自定义滚动条。它可以自适应各种浏览器，还支持缩放和平滑滚动等很多特性。同时它也提供了很多 API，可以支持各种定制需求。

安装并引入 niceScroll 后，你可以使用如下代码启用它：

$(document).ready(function() {
  $('body').niceScroll();
});

这会将 body 的滚动条变为自定义样式。

你还可以使用 scrollbar-rail-* 系列的 CSS 类来自定义滚动条的样式，例如：

.nicescroll-rails.nicescroll-rails-vr {
  background-color: #FFFFFF;
  box-shadow: inset 0 0 15px rgba(0,0,0,0.1);
  width: 20px;
}

.nicescroll-cursors {
  width: 10px;
  border-radius: 10px;
  background-color: #EFEFEF;
  box-shadow: 0 0 5px rgba(0,0,0,0.2);
  z-index: 1000;
}

这里，我们修改了：

• .nicescroll-rails.nicescroll-rails-vr：垂直滚动条的样式；
• .nicescroll-cursors：滚动条滑块的样式。

总结

在本文中，我们讲解了两种自定义滚动条的方式，分别是使用 ::-webkit-scrollbar 伪元素和使用 jQuery 插件。你可以根据自己的需求和技术水平来选择适合自己的方法，打造符合自己网站风格的自定义滚动条。

希望这篇攻略能够对你有所帮助，如果您有任何问题或需要进一步的帮助，请随时回复。