纯JavaScript制作的自定义滚动条插件–scrollbot

纯JavaScript制作的自定义滚动条插件

scrollbot是一个独立的JavaScript库,是一个高度可定制的滚动条插件,可以改变浏览器默认的滚动条样式。

使用方法

创建一个滚动容器

<div class="scrollbot" id="demo">
     ...
</div>

滚动区域必须有一个固定的高度

.scrollbot{
  width:400px;
  height:250px;
  box-shadow:1px 1px 6px -2px #000;
  margin:10px;
  display:inline-block;
  vertical-align:top;
  padding:3px 5px;
  background:#fff;
  text-align:left;
}

初始化scrollbot,在滚动容器创建一个默认的滚动条

var normal = new scrollbot("#demo");

调整滚动条的宽度

var normal = new scrollbot("#demo", 20); // 20px

设置滚动条样式

// .setStyle(scrollbar,scrollbarholder)
var styled = new scrollbot("#styled").setStyle({
  "border-radius":0,
  "background-color":"#ff5722"
},{
  "border-radius":0,
  "background-color":"#ff9800"
})

触发滚动事件

var callBack = new scrollbot("#callback").onScroll(function);
打赏
下载 在线预览 积分 (-2) 吐槽 (2)
×
加载中,请稍候…

您需要 登录 后才能发表评论。

avatar

- 评论

  • 加载中,请稍候…
我要吐槽