当前位置:主页 > JavsScript库 > 其它 >

用于溢出内容的响应式自定义滚动条 - exScroll
栏目分类:其它   发布日期:2021-09-15   浏览次数:

exScroll 是一个 JavaScript 库,它将响应式、可定制的滚动条附加到内部内容溢出的容器。

使用:

1. 将样式表 exscroll.css 和 JavaScript exscroll.js 插入到文档中。

<link rel="stylesheet" href="./dist/exscroll.css" />
<script src="./dist/exScroll.js"></script>

2. 将滚动条添加到容器中。

<div exscroll>
  <div exscroll-content>Inner Content</div>
  <div exscroll-scrollbar></div>
</div>

3. 初始化 exScroll 并完成。

let scroller = new exScroll();
exScroll();

4. 覆盖默认选择器。

<div class="wrapper">
  <div class="content">
    <div class="inner"></div>
  </div>
  <div class="scrollbar"></div>
</div>
let scroller = new exScroll({
    wrapperName: ".wrapper",
    contentName: ".content",
    scrollerName: ".scrollbar",
});
exScroll();

5. 覆盖滚动条的默认样式。

.exscroll-scrollbar {
  box-sizing: border-box;
  margin-top: 20px;
  width: calc(100% - 100px);
  margin-left: 50px;
  height: 12px;
  padding: 2px;
  border-radius: 9999px;
  background-color: #fff;
  border: 1px solid #aaa;
  position: relative;
}
 
.exscroll-dragger {
  display: block;
  width: 40px;
  height: 100%;
  background-color: #aaa;
  border-radius: 9999px;
  position: absolute;
  top: 0;
  cursor: pointer;
}

官方网站:https://github.com/seanhay/exScroll

相关热词: exScroll滚动条

声源:本站内容均来自互联网,仅供交流学习之用,请勿作商业用途,所有资源版权归原作者所有。如果有侵犯到您的权益,请联系本站删除,谢谢合作!
jQuery库 JavsScript库 Html5库 CSS3库