跨浏览器响应式滚动条美化jQuery插件

jQuery Scrollbar是一款非常实用的跨浏览器响应式滚动条美化jQuery插件。该滚动条插件支持IE7+浏览器，提供多种主题风格的滚动条样式。它采用响应式设计，支持垂直和水平滚动条。它的特点还有：

• 使用简单
• 没有固定的宽度和高度
• 响应式设计
• 可以通过CSS来自定义滚动条样式
• 标准的滚动条行为
• 支持垂直和水平滚动条
• 可重新初始化滚动条
• 支持外部滚动条
• 浏览器支持：IE7+, Firefox, Opera, Chrome, Safari
• jQuery滚动条作为angular.js指令
• 支持文本框(Textarea)的滚动条

使用方法

HTML结构

你可以在任何容器中使用该滚动条插件，例如在一个<div>中，它的HTML结构如下：

<div class="scrollbar-inner">
    <p class="permanent">
        Simple inner scrollbar over content
    </p>
    <p>...</p>
    <p>...</p>
    <p>...</p>
</div>              
              

CSS样式

滚动条的基本样式如下：

.scroll-wrapper {
    overflow: hidden !important;
    padding: 0 !important;
    position: relative;
}
.scroll-wrapper > .scroll-content {
    border: none !important;
    box-sizing: content-box !important;
    height: auto;
    left: 0;
    margin: 0;
    max-height: none;
    max-width: none !important;
    overflow: scroll !important;
    padding: 0;
    position: relative !important;
    top: 0;
    width: auto !important;
}
.scroll-wrapper > .scroll-content::-webkit-scrollbar {
    height: 0;
    width: 0;
}
.scroll-element {
    display: none;
}
.scroll-element, .scroll-element div {
    box-sizing: content-box;
}
.scroll-element.scroll-x.scroll-scrollx_visible,
.scroll-element.scroll-y.scroll-scrolly_visible {
    display: block;
}
.scroll-element .scroll-bar,
.scroll-element .scroll-arrow {
    cursor: default;
}
.scroll-textarea {
    border: 1px solid #cccccc;
    border-top-color: #999999;
}
.scroll-textarea > .scroll-content {
    overflow: hidden !important;
}
.scroll-textarea > .scroll-content > textarea {
    border: none !important;
    box-sizing: border-box;
    height: 100% !important;
    margin: 0;
    max-height: none !important;
    max-width: none !important;
    overflow: scroll !important;
    outline: none;
    padding: 2px;
    position: relative !important;
    top: 0;
    width: 100% !important;
}
.scroll-textarea > .scroll-content > textarea::-webkit-scrollbar {
    height: 0;
    width: 0;
}
.scrollbar-inner > .scroll-element,
.scrollbar-inner > .scroll-element div
{
    border: none;
    margin: 0;
    padding: 0;
    position: absolute;
    z-index: 10;
}
.scrollbar-inner > .scroll-element div {
    display: block;
    height: 100%;
    left: 0;
    top: 0;
    width: 100%;
}
.scrollbar-inner > .scroll-element.scroll-x {
    bottom: 2px;
    height: 8px;
    left: 0;
    width: 100%;
}
.scrollbar-inner > .scroll-element.scroll-y {
    height: 100%;
    right: 2px;
    top: 0;
    width: 8px;
}
.scrollbar-inner > .scroll-element .scroll-element_outer {
    overflow: hidden;
}
.scrollbar-inner > .scroll-element .scroll-element_outer,
.scrollbar-inner > .scroll-element .scroll-element_track,
.scrollbar-inner > .scroll-element .scroll-bar {
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
}
.scrollbar-inner > .scroll-element .scroll-element_track,
.scrollbar-inner > .scroll-element .scroll-bar {
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=40)";
    filter: alpha(opacity=40);
    opacity: 0.4;
}
.scrollbar-inner > .scroll-element .scroll-element_track { background-color: #e0e0e0; }
.scrollbar-inner > .scroll-element .scroll-bar { background-color: #c2c2c2; }
.scrollbar-inner > .scroll-element:hover .scroll-bar { background-color: #919191; }
.scrollbar-inner > .scroll-element.scroll-draggable .scroll-bar { background-color: #919191; }
.scrollbar-inner > .scroll-element.scroll-x.scroll-scrolly_visible .scroll-element_track { left: -12px; }
.scrollbar-inner > .scroll-element.scroll-y.scroll-scrollx_visible .scroll-element_track { top: -12px; }
.scrollbar-inner > .scroll-element.scroll-x.scroll-scrolly_visible .scroll-element_size { left: -12px; }
.scrollbar-inner > .scroll-element.scroll-y.scroll-scrollx_visible .scroll-element_size { top: -12px; }             
              

初始化插件

在页面DOM元素加载完成之后，可以通过下面的方法来初始化该插件。

jQuery(document).ready(function(){
    jQuery('.scrollbar-inner').scrollbar();
});    
              

配置参数

下面是该滚动条插件的一些可用配置参数。

• autoScrollSize：根据容器的尺寸来自动计算滚动条的尺寸。默认值为true。
• autoUpdate：是否在容器尺寸改变时自动更新滚动条。默认值为true。
• disableBodyScroll：如果设置为true并且鼠标在主容器中滚动，页面将不会跟随滚动。默认值为false。
• duration：滚动条的滚动速度。单位毫秒，默认值200。
• ignoreMobile：是否在移动手机上初始化自定义的滚动条。默认值为false。
• ignoreOverlay：在原生滚动条覆盖内容的时候是否在浏览器中初始化自定义滚动条（Mac OS和移动手机等）。默认值：false。
• scrollStep：滚动的步长。单位像素，默认值30。
• showArrows：是否在高级滚动条中添加class来显示滚动条的箭头。默认值false。
• stepScrolling：在用鼠标拖动滚动条时是否模仿滚动步长。默认值true。
• scrollx：水平滚动条的类型：simple, advanced, HTML 或 jQuery选择器。默认值：simple
• scrolly：垂直滚动条的类型：simple, advanced, HTML 或 jQuery选择器。默认值：simple
• onDestroy：当滚动条被销毁时的回调函数。
• onInit：滚动条第一次初始化时的回调函数。
• onScroll：在容器内容滚动时的回调函数。
• onUpdate：滚动条更新之前的回调函数。

注意事项

• 滚动元素不要设置padding，margin，left和top值。
• 在IE8中不要设置max-height，这样做会使浏览器崩溃。
• MacOS中Firefox浏览器不能使用该插件来自定义滚动条。