jQuery自定义风格滚动条插件perfect-scrollbar-前端设计-优客志

各个浏览器的滚动条风格不一，因此很多网站都会自定义滚动条的风格。自定义风格的滚动条在所有的浏览器上看起来是一样（例如：几乎所有的谷歌应用程序都是用的灰色细条滚动条）。

Perfect Scrollbar 是一个轻量级的（~14KB）的 jQuery插件，能够帮助你轻松创建出自定义风格的滚动条。它不会影响默认的布局，也不需要任何任何的 CSS 修改，该插件适用于任何大小的容器，并重新安排位置，如果容器大小发生变化会自动调整位置。此外，滚动条的风格可以完全通过 CSS 定制，另外还支持鼠标滚轮插件 – jquery-mousewheel。

使用方法：

引入核心文件

 <link href="src/perfect-scrollbar.css" rel="stylesheet">
 <script src="http://ajax.useso.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
 <script src="src/jquery.mousewheel.js"></script>
 <script src="src/perfect-scrollbar.js"></script>

构建html

 <div id="Default" class="contentHolder">
      <div class="content"> </div>
 </div>

写入js，初始化插件

jQuery(document).ready(function ($) {
    "use strict";
    $('#Default').perfectScrollbar();
});

简单示例

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>perfect-scrollbar example</title>
      <link href="src/perfect-scrollbar.css" rel="stylesheet">
      <script src="http://cdnjs.gtimg.com/cdnjs/libs/jquery/1.10.2/jquery.min.js"></script>
      <script src="src/jquery.mousewheel.js"></script>
      <script src="src/perfect-scrollbar.js"></script>
      <style>
        .contentHolder { position:relative; margin:0px auto; padding:0px; width: 600px; height: 400px; overflow: hidden; }
        .contentHolder .content { background-image: url('./examples/azusa.jpg'); width: 1280px; height: 720px; }
        .spacer { text-align:center }
      </style>
    <script>
      jQuery(document).ready(function ($) {
        "use strict";
        $('#Default').perfectScrollbar();
      });
    </script>
  </head>
  <body>
    <div id="Default" class="contentHolder">
      <div class="content">
      </div>
    </div>
  </body>
</html>

更多的参数设置请参考官方文档。

GitHub