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

所属分类:UI-滚动

 34889  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);
},

注释掉

相关插件-滚动

全屏滚动插件带侧边栏

过渡效果柔和的滚动插件,适用pc和手机
  滚动
 36726  449

类似fullPage的全屏滚动插件

这是一款类似fullPage的全屏滚动插件,使用很简单
  滚动
 49362  415

jQuery横向全屏切换滚动

jQuery横向全屏切换滚动兼容ie6
  滚动
 48898  454

js交集监测插件scrollama.js

Scrollama是一个轻量级JavaScript库, 用于检测页面滚动时监听元素是否重叠。
  滚动
 25086  326

讨论这个项目(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
        复制改名呗
    回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复