自定义滚动条jQuery插件- Perfect Scrollbar
2024-08-24 08:22:17
主要特性:
- 不需要修改任何的元素的css
- 滚动条不影响最初的页面布局设计
- 滚动条支持完整的自定义
- 滚动条的尺寸和位置会随着容器尺寸或者内容的变化而变化
- 依赖于jQuery和相关几个类库
- 不需要定义宽度和高度。它会固定在容器的右下
- 你可以修改任何滚动条的样式,不依赖于其它脚本
- 滚动条支持'update'方法。如果你需要修改滚动条的位置和大小,只需要调用这个方法即可
- 不使用'scrollTop'和'scrollLeft',不是用任何绝对定位
使用要求:
- 必须有一个内容元素
- 容器必须拥有一个'position'的CSS样式定义
- 滚动条的position必须是'absolute'
- scrollbar-x必须拥有一个bottom的样式定义,scrollbar-必须有一个'right'的样式定义
如何使用:
HTML代码
<!DOCTYPE html>
<html>
<head>
<title>perfect-scrollbar</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="css/perfect-scrollbar.css" rel="stylesheet">
<style>
#Demo {position:relative;margin:0px auto;padding:0px;width:600px;height:400px;overflow:hidden;}
#Demo .content {background:#666;width:1280px;height:720px;padding:10px;color:#fff}
</style>
</head>
<body>
<div id='Demo'>
<div class='content'>
<p>
不需要修改任何的元素的css
滚动条不影响最初的页面布局设计
滚动条支持完整的自定义
滚动条的尺寸和位置会随着容器尺寸或者内容的变化而变化
依赖于jQuery和相关几个类库
不需要定义宽度和高度。它会固定在容器的右下
你可以修改任何滚动条的样式,不依赖于其它脚本
滚动条支持'update'方法。如果你需要修改滚动条的位置和大小,只需要调用这个方法即可
不使用'scrollTop'和'scrollLeft',不是用任何绝对定位
</p>
</div>
</div>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script src="js/perfect-scrollbar.with-mousewheel.min.js"></script>
<script>
$(function() {
$('#Demo').perfectScrollbar();
});
</script>
</body>
</html>
javascript
$('#Demo').perfectScrollbar();
如果容器大小或者位置变化了,调用如下方法即可:
$('#Demo').perfectScrollbar('update');
如果你需要销毁,调用如下:
$('#Demo').perfectScrollbar('destroy');
如果你需要滚动到某一个特定位置,调用如下:
$("#Demo").scrollTop(0);
$("#Demo").perfectScrollbar('update');
如果你需要支持鼠标滚轮支持,请包含这个插件: jquery-mousewheel,它能够帮助你添加鼠标滚轮支持。
展示地址:http://noraesae.github.io/perfect-scrollbar/
GitHub地址:https://github.com/noraesae/perfect-scrollbar
最新文章
- 企业做数据缓存是使用Memcached还是选Redis?
- phpmyadmin #1045 - Access denied for user &#39;root&#39;@&#39;localhost&#39; (using password: NO)
- C#设计模式之装饰者
- 大熊君大话NodeJS之开篇------Why NodeJS(将Javascript进行到底)
- supersr--九宫格公式(根据多少行多少列排版)
- NYOJ 5 字符串处理 find()函数应用
- 安卓应用运营知识:VersionCode和VersionName
- HIbernate学习笔记(九) hibernate事务并发处理与乐观悲观锁
- Java C# MD5 加密串一致性
- linux下python多版本共存
- py正则表达式
- java值传递
- 适应多行长文本的Android TextView
- 小结php中几种网页跳转
- js盒子模型
- java倒计时三种简单实现方式
- 为什么导入本地jquery.js老是无效?(已解决)
- 3 数据分析之Numpy模块(2)
- 发福利了!!超过100本的linux免费书籍
- Git 撤销所有未提交(Commit)的内容