建站资源下载详情
为您免费提供多种建站资源下载,包括网站模板下载、前端插件下载和字体下载!您只需注册为会员即可任意下载!

JQuery简约而强大的自定义滚动条插件Perfect Scrollbar

来源:易助科技网浏览量:9收藏

简介

Perfect Scrollbar 是一款简约而又完美的JQuery自定义滚动条插件。也就是说,Perfect Scrollbar 是一个简约轻量的 jQuery 插件,能够帮助你轻松创建出自定义风格的滚动条。它不会影响默认的布局,也不需要任何任何的 CSS 修改,该插件适用于任何大小的容器,并重新安排位置,如果容器大小发生变化会自动调整位置。此外,滚动条的风格可以完全通过 CSS 定制。


插件特定:

无需对默认元素有任何更改

滚动条不应影响默认设计布局

滚动条的设计应(几乎)完全可定制

若容器或内容大小发生变化,则滚动条的大小和位置应自动调整

(下载的附件中附有)


使用

1.  引入文件


<script src="dist/perfect-scrollbar.js"></script>


2.  HTML


<style>
  #container {position: relative;width: 600px;height: 400px;}
</style>

<link rel="stylesheet" href="css/perfect-scrollbar.css">


3.  调用

初试化


const container = document.querySelector('#container');
const ps = new PerfectScrollbar(container);

// or just with selector stringconst
ps = new PerfectScrollbar('#container');


还可以使用options初试化


const ps = new PerfectScrollbar(
  '#container', {
    wheelSpeed: 2,
    wheelPropagation: true,
    minScrollbarLength: 20
  }
);



相关链接

官方文档(英文):https://perfectscrollbar.com/?utm_source=GitHub&utm_medium=PerfectScrollbar

GitHub 地址 :https://github.com/yanxlg/perfect-scrollbar