自定义滚动条jQuery插件- Perfect Scrollbar
主要特性:
- 不需要修改任何的元素的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
自定义滚动条jQuery插件- Perfect Scrollbar的更多相关文章
- 超棒的自定义超酷滚动条jQuery插件 - Perfect Scrollbar
可能大家厌倦了千篇一律的页面滚动条,如果你希望能够设计出与众不同的页面UI设计的话,Perfect ScrollBar可能就是你寻找的解决方案. 这个滚动条来自于一个个人项目,一个简单但是非常棒的滚动 ...
- jQuery自定义滚动条样式插件mCustomScrollbar
如果你构建一个很有特色和创意的网页,那么肯定希望定义网页中的滚动条样式,这方面的 jQuery 插件比较不错的,有两个:jScrollPane 和 mCustomScrollbar. 关于 jScro ...
- WPF 自定义滚动条(ScrollView、ScrollBar)样式
一.滚动条基本样式 本次修改Scrollview及ScrollBar滚动条样式是通过纯样式实现的.修改的内容包含滚动条的颜色,上下按钮的隐藏.另外添加了鼠标经过滚动条动画. style样式如下: &l ...
- jquery自定义滚动条 鼠标移入或滚轮时显示 鼠标离开或悬停超时时隐藏
一.需求: 我需要做一个多媒体播放页面,左侧为播放列表,右侧为播放器.为了避免系统滚动条把列表和播放器隔断开,左侧列表的滚动条需要自定义,并且滚动停止和鼠标离开时要隐藏掉. 二.他山之石: 案例来自h ...
- 自定义jQuery插件Step by Step
1.1.1 摘要 随着前端和后端技术的分离,各大互联网公司对于 Mobile First理念都是趋之若鹜的,为了解决网页在不同移动设备上的显示效果,其中一个解决方案就是Responsive Desig ...
- 1.ssm web项目中的遇到的坑--自定义JQuery插件(slide menu)
自定义的JQuery插件写的回调函数不执行: 写好了回调函数,将函数打印出来是原形,就是不执行 function () { console.log("---onClickItem---&qu ...
- Perfect Scrollbar – 完美的 jQuery 滚动条插件
Perfect Scrollbar 是一个很小的,但完美的 jQuery 滚动插件.滚动条不会影响原来的设计布局,滚动条的设计是完全可定制的.你可以改变几乎所有的 CSS 样式的滚动条,滚动条设计对脚 ...
- jQuery 自定义网页滚动条样式插件 mCustomScrollbar 的介绍和使用方法(转)
系统默认的滚动条样式,真的已经看的够恶心了.试想一下,如果在一个很有特色和创意的网页中,出现了一根系统中默认的滚动条样式,会有多么的别扭. 为了自己定义网页中的滚动条的方法,我真的已经找了很久了,就目 ...
- 【JQuery插件】元素根据滚动条位置自定义吸顶效果
;(function($){ $.fn.extend({ /* 元素根据滚动条位置自定义吸顶插件 @defaultTop 初始化top位置 @startTop 开始滚动和回复原样的位置 @demo v ...
随机推荐
- Android N API预览
Android N for Developers 重要的开发人员功能 多窗体支持 通知 JIT/AOT 编译 高速的应用安装路径 外出瞌睡模式 后台优化 Data Saver 高速设置图块 API 号 ...
- log4j中怎样将信息写入到不同的日志文件
log4j中怎样将信息写入到不同的日志文件 有没有想过为什么我们用:Logger logger = Logger.getLogger(ABC.class) ;来得到 logger? 不想只看人家的 d ...
- 每天一个Linux命令(20)find命令_exec参数
find命令的exec参数,用于find查找命令完成以后的后续操作. (1)用法: 用法: [find命令] [-exec 其他命令 {} \;] (2)功能: 功能:-exec ...
- wget 监控web服务器
wget --timeout=$timeout --tries=$times $url -q &>/dev/null --timeout=number 设定超时时间 --tries=nu ...
- C#实现对外部程序的调用操作
测试工具,首先也是一个C#的程序,它的主要目的是: 1:获取上文应用程序的窗口句柄,继而获取TextBox句柄及Button句柄: 2:为TextBox随机填入一些字符: 3:模拟点击Button: ...
- min/max优化,count ,group by
min/max优化 在表中,一般都是经过优化的. 如下地区表 id area pid 1 中国 0 2 北京 1 ... 3115 3113 我们查min(id), id是主键,查Min(id)非常快 ...
- QT MVC 模型/视图
1. 模型视图实例一, QFileSystemModel QTreeView ,model/view示例. #include <QApplication> #include <QF ...
- linux应用之ntpdate命令联网同步时间
当Linux服务器的时间不对的时候,可以使用ntpdate工具来校正时间. 安装:yum install ntpdate ntpdate简单用法: # ntpdate ip # ntpdate 210 ...
- 十九 Django框架,发送邮件
全局配置settings.py EMAIL_BACKEND = 'django.core.mail.backends.smtp.EmailBackend' #发送邮件引擎 EMAIL_USE_TLS ...
- List 中去除 null 方法讨论
先看下面的程序段: public static void main(String[] args) { List<Integer> arrays = new ArrayList<Int ...