做网站|网站建设,就上易助科技网

前端技术文档及相关资料下载

关于前端html、css、js等技术上的各种疑难棘手问题的解决方案探讨及相关资料下载!

JQuery简约而强大的自定义滚动条插件Perfect Scrollbar
来源:易助科技网浏览量:4收藏

简介

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 string
const 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