jQuery自定义滚动条插件scrollBar.js

所属分类:UI-滚动

 36088  327  查看评论 (4)
分享到微信朋友圈
X
jQuery自定义滚动条插件scrollBar.js ie兼容8

代码注释很全,可通过简单的修改样式来改变滚动条外观。

滚动条内容、滚动条、滚动滑块的样式类名

contentSelector: '.scroll_cont', //滚动内容区
barSelector: '.scroll_bar', //滚动条
sliderSelector: '.scroll_slider' //滚动滑块

如果想自己设定滚动条滑块高度,请将scrollBar.js内的

// 获取内容来定义滑块的高度
this._initSliderHeight();
// 根据内容来定义滑块的高度
    _initSliderHeight: function() {
     var rate = this.$cont.height()/this.$cont[0].scrollHeight;
     var sliderHeight = rate*this.$bar.height();
     this.$slider.css('height',sliderHeight);
},

注释掉

相关插件-滚动
  滚动
 37889  360

仿股市表格实时轮播

这是一款简单的不需要任何外部插件的轮播效果图
  滚动
 37982  405

视觉滚动差效果

纯css3写的滚动视差效果
  滚动
 31778  357
  滚动
 34952  488

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

    转瞬红颜 0
    2019/8/7 10:18:26
    在弹窗中应用时,无法获取未定义的scrollHeight。 回复
    小星星?? 0
    2019/4/1 17:42:58
    你好,未超出内容,如何不显示滚动条呢
    回复
    经历过痛楚的人才知道珍惜 0
    2018/12/5 16:24:29
    如果一个页面有几个地方都有这个滚动条怎么办?
        0
        2019/1/11 15:46:15
        复制改名呗
    回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复