纯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);
下载 (1) 在线预览 积分 (-1) 吐槽 (2)
  • 版权声明:本文内容由互联网用户自发贡献,本站不拥有所有权,不承担相关法律责任。如果发现本站有涉嫌抄袭的内容, 欢迎发送邮件至 postmaster@zzyzan.com 举报,并提供相关证据,一经查实,本站将立刻删除涉嫌侵权内容。
  • 本作品是由 小乖乖资源共享网 会员 时间的灰烬 的投递作品。
  • 欢迎转载,但请务必注明来源地址:http://www.zzyzan.com/web/other/8398.html

- 评论

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