简洁的jQuery滚动条插件scrollBar.js

所属分类:UI-滚动

 62103  383  查看评论 (13)
分享到微信朋友圈
X
简洁的jQuery滚动条插件scrollBar.js ie兼容9

使用方法:

1. 必须引用的文件:

jquery.js,scrollBar.js,scrollBar.css;

2. 初始化:

1) jquery选择器

.scrollBar();//这是最基本的初始化方法,滚动条为默认的样式

2) jquery选择器

.scrollBar({
    barWidth: 10, //滚动条的宽度(这里根据需要写数值即可,不设置是10,即默认10px)
    position: "x,y", //写“x”代表只出水平滚动条,写“y”表示只出垂直滚动条,写“x,y”则出水平和垂直滚动条(只有在内容超出容器时才出现滚动条)
    wheelDis: 15 //滚轮滚动一次向下或向上滚动的距离,默认是15,可根据需要修改数值
});

3) 说明:本滚动条插件在初始化后会在内容超出容器后自动出现,当内容过少时不会出现滚动条!

相关插件-滚动

jquery文字上下滚动

jquery文字上下滚动插件jqScroll.js调用简单,代码注释很清楚。
  滚动
 57104  510

jquery无缝滚动

真正的无缝滚动
  滚动
 74450  524

新闻向下翻滚更新

新闻向下翻滚更新
  滚动
 34905  431

原生js向上滚动消息框

原生js封装的滚动消息框,简单实用
  滚动
 28952  329

讨论这个项目(13)回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

    Code 0
    2020/2/5 10:22:24
    怎么设置滚动条的默认位置? 回复
    wes 0
    2019/6/26 11:47:23
    <div class="scrollBox">
        <div class="contentBox1"> </div>
        <div class="contentBox1">
            <div class="scrollBox"></div>
        </div>
    </div>

    子集加一个class:scrollBox,滚动条不动了。怎么解决。

    回复
    像?孓亥孑 0
    2019/3/4 23:10:55
    .scrollBar({
        barWidth: 10, //滚动条的宽度(这里根据需要写数值即可,不设置是10,即默认10px)
        position: "x,y", //写“x”代表只出水平滚动条,写“y”表示只出垂直滚动条,写“x,y”则出水平和垂直滚动条(只有在内容超出容器时才出现滚动条)
        wheelDis: 15 //滚轮滚动一次向下或向上滚动的距离,默认是15,可根据需要修改数值
    });
    回复
    __lllllll 0
    2019/2/13 14:47:53
    谁能告诉我怎么用 回复
    Mu′头人_、 0
    2018/12/5 20:52:32
    $(...).scrollBar is not a function
        __lllllll0
        2019/2/13 14:49:09
        $(document).ready(function(){

        })
    回复
    maxmaxgogo 0
    2018/11/1 10:47:15
    chrome 70.0.3538.77,水平滚动条用触摸板不能左右滑动,可惜了,下载了没用上。 回复
    得不到的永远矜贵 0
    2018/9/21 15:18:54
    如果滚动的时候 ,触发某个事件,或者滚动的时候 获取滚动的left值,这个怎么获取
        米苏情怀0
        2020/9/4 18:20:06
        你解决了吗
    回复
    xytaizi1230 0
    2018/5/25 17:04:18
    xytaizi1230 0
    2018/5/4 11:43:42
    可以定义滚动位置吗
    比如指定滚动条滚动到某一个位置
        空白格0
        2018/8/23 16:56:38
        可以的 scrollTop 这个参数
        星野?真0
        2019/3/1 19:23:21
        scrollTop 这个参数,怎么设置。滚动条不会动啊
    回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复