当前位置：首页 > 网页特效 > 其他

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

分类：其他日期：2024-05-14 点击(1) 评论(0)

简介

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

```html
<div class="scrollbar-inner">
    <p class="permanent">
        Simple inner scrollbar over content
    </p>
    <p>...</p>
    <p>...</p>
    <p>...</p>
</div>   
```           
####  CSS样式
滚动条的基本样式如下：

```html
.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元素加载完成之后，可以通过下面的方法来初始化该插件。

```html
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浏览器不能使用该插件来自定义滚动条。

web299.com

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

简介

html5浪漫粒子表白文字特效

SlidesJS幻灯片特效

html5瀑布流相册特效

css3 svg实现的情人节表白鲜花动画特效

t-scroll.js基于ES6的DOM元素,过渡动画库插件

纯js写省市区三级联动效果