jQuery slimScroll 美观简洁的虚拟滚动条插件


Chrome
Firefox
Safari
ie6+

免费资源
文件1地址点击下载
免费资源下载通道不稳定,请耐心尝试。解压密码:jianzhanmi.com
付费资源
此资源下载价格为1圆,请先
本商品为电子商品,具有可复制性,一经售出,不可退换!解压密码:jianzhanmi.com

功能简述

这是一款可自定义程度很高的虚拟滚动条插件,功能丰富。

基本配置

$(selector).slimScroll();

其他示例

$(function() {
    $(".slimscroll").slimScroll({
        width: 'auto', //可滚动区域宽度
        height: '100%', //可滚动区域高度
        size: '10px', //组件宽度
        color: '#000', //滚动条颜色
        position: 'right', //组件位置:left/right
        distance: '0px', //组件与侧边之间的距离
        start: 'top', //默认滚动位置:top/bottom
        opacity: .4, //滚动条透明度
        alwaysVisible: true, //是否 始终显示组件
        disableFadeOut: false, //是否 鼠标经过可滚动区域时显示组件,离开时隐藏组件
        railVisible: true, //是否 显示轨道
        railColor: '#333', //轨道颜色
        railOpacity: .2, //轨道透明度
        railDraggable: true, //是否 滚动条可拖动
        railClass: 'slimScrollRail', //轨道div类名 
        barClass: 'slimScrollBar', //滚动条div类名
        wrapperClass: 'slimScrollDiv', //外包div类名
        allowPageScroll: true, //是否 使用滚轮到达顶端/底端时,滚动窗口
        wheelStep: 20, //滚轮滚动量
        touchScrollStep: 200, //滚动量当用户使用手势
        borderRadius: '7px', //滚动条圆角
        railBorderRadius: '7px' //轨道圆角
    });
});

Events 事件

当滚动条到达父容器的顶部或底部时,slimScroll 会发布 slimscroll 事件。您可以使用 jQuery bind 方法订阅此事件:

$(selector).slimScroll().bind('slimscroll', function(e, pos){
     console.log("Reached " + pos");
});

项目地址

https://github.com/rochal/jQuery-slimScroll


工作中


没有账号? 忘记密码?

社交账号快速登录