可能大家厌倦了千篇一律的页面滚动条,如果你希望能够设计出与众不同的页面UI设计的话,Perfect ScrollBar可能就是你寻找的解决方案。

这个滚动条来自于一个个人项目,一个简单但是非常棒的滚动条设计。当然这里也有其它的解决方案,如果你有兴趣也可以阅读:

使用jQuery插件jScrollPane开发Mac OSX Lion风格的滚动条

一个仿Apple - OS X Lion操作系统风格的滚动条jQuery插件- lionbars

主要特性:

  • 不需要修改任何的元素的css
  • 滚动条不影响最初的页面布局设计
  • 滚动条支持完整的自定义
  • 滚动条的尺寸和位置会随着容器尺寸或者内容的变化而变化
  • 依赖于jQuery和相关几个类库
  • 不需要定义宽度和高度。它会固定在容器的右下
  • 你可以修改任何滚动条的样式,不依赖于其它脚本
  • 滚动条支持'update'方法。如果你需要修改滚动条的位置和大小,只需要调用这个方法即可
  • 不使用'scrollTop'和'scrollLeft',不是用任何绝对定位

使用要求:

  • 必须有一个内容元素
  • 容器必须拥有一个'position'的CSS样式定义
  • 滚动条的position必须是'absolute'
  • scrollbar-x必须拥有一个bottom的样式定义,scrollbar-必须有一个'right'的样式定义

如何使用:

HTML代码

<style> #Demo { position: 'relative'; } </style> <div id='Demo'> <div> ... </div> </div>

javascript

$('#Demo').perfectScrollbar();

如果容器大小或者位置变化了,调用如下方法即可:

$('#Demo').perfectScrollbar('update');

如果你需要销毁,调用如下:

$('#Demo').perfectScrollbar('destroy');

如果你需要滚动到某一个特定位置,调用如下:

$("#Demo").scrollTop(0);
$("#Demo").perfectScrollbar('update');

如果你需要支持鼠标滚轮支持,请包含这个插件: jquery-mousewheel,它能够帮助你添加鼠标滚轮支持。

超棒的自定义超酷滚动条jQuery插件 - Perfect Scrollbar的更多相关文章

  1. 自定义滚动条jQuery插件- Perfect Scrollbar

    主要特性: 不需要修改任何的元素的css 滚动条不影响最初的页面布局设计 滚动条支持完整的自定义 滚动条的尺寸和位置会随着容器尺寸或者内容的变化而变化 依赖于jQuery和相关几个类库 不需要定义宽度 ...

  2. 16个非常酷的jQuery插件

    摘要: 下面所有的插件有很大的功能,我相信大多数会帮助你即将到来的项目.借助他们可以使你的网站更加绚丽多彩. Lens Flare in JavaScript 这个jQuery插件可以帮助你处理图片, ...

  3. jquery 插件大全

    1.jquery.roundabout.js 超棒的左右3D旋转式幻灯片jQuery插件 2.jquery validate.js 验证表单 3.jquery ui插件 对话框 日期 4.lhgdia ...

  4. 分享一款超棒的jQuery旋钮插件 - jQuery knob

    转自:http://www.cnblogs.com/gbin1/archive/2012/05/08/2489908.html 在线演示  本地下载 如果你也在寻找一款生成漂亮旋钮(knob)的jQu ...

  5. 7 款超炫的 jQuery 插件

    jQuery大大简化了我们的前端代码,因为jQuery的简单和开源,也涌现出了层出不穷的jQuery插件,这些实用的jQuery插件也不断推动着jQuery开源社区的发展.下面精选了几款让人跃跃欲试的 ...

  6. 如何创建一个自定义jQuery插件

    简介 jQuery 库是专为加快 JavaScript 开发速度而设计的.通过简化编写 JavaScript 的方式,减少代码量.使用 jQuery 库时,您可能会发现您经常为一些常用函数重写相同的代 ...

  7. 推荐60个jQuery插件(转)

    jQuery插件jQuery Spin Button自定义文本框数值自增或自减 jQuery插件JQuery Pager分页器实现javascript分页功能 jQuery插件FontSizer实现J ...

  8. 另外一款超棒的响应式布局jQuery插件 – Freetile.js

    在线演示 我们曾经介绍过俩款知名的响应式布局插:isotope和masonary,今天我们这里再介绍一款相当不错的响应式布局插件 – Freetile.js,使用它同样可以生成超酷的动态布局效果.相信 ...

  9. jQuery超酷下拉插件6种效果演示

    原始的下拉框很丑啦, 给大家一款jQuery超酷下拉插件6种效果 效果预览 下载地址 实例代码 <div class="container"> <section ...

随机推荐

  1. hdu_5813_Elegant Construction(xjb搞)

    题目链接:hdu_5813_Elegant Construction 题意: 给你n个点,每个点要可以到达ai个点,可以直接可以间接,不能有环,问是否可行,如果可行就任选一种方式连接,并输出连接的边数 ...

  2. Python之迭代器&装饰器&生成器&正则

    1.迭代器 迭代器是访问数据集合的一种方式,它只能从集合的第一个元素开始顺序访问,直到最后一个元素结束.类似于linux里的cat命令,只能挨行读取文本内容,不可以跳到中间或者尾部读取(不会把所有的数 ...

  3. 向openwrt 源码添加ap143支持

    借鉴地址:http://www.pppei.net/blog/post/536 1.向文件 \target\linux\ar71xx\generic\profiles\atheros.mk 中添加ap ...

  4. .Net Core 上传图片

    /// <summary> /// 图片上传并存入数据库 /// </summary> /// <returns></returns> public J ...

  5. [kuangbin带你飞]专题四 最短路练习 POJ 3268 Silver Cow Party

    题意: 在一个有向图中求n头牛从自己的起点走到x再从x走回来的最远距离 思路一开始是暴力跑dij…… 讲道理不太可能…… 然后就百度了一下 才知道把矩阵转置的话就只需要求两次x的单源最短路…… /* ...

  6. Gentoo解决Windows双系统时间不同步的问题

    升级后的gentoo不再使用/etc/conf.d/clock,而是使用/etc/conf.d/hwclock来设置和时间相关了. 在/etc/conf.d/hwclock文件中设置系统时间为本地时间 ...

  7. 关于ios 程序加载百度地图lib,出现链接错误:找不到符号 (null): _OBJC_CLASS_$_BMKMapManager的解决办法

    报告的错误信息 ld: warning: ignoring file /Users/5012/Documents/sphuang/IOS_project/baidu_map/ShareLocation ...

  8. ajax 假上传文件

    1. <form name="certForm" id="certForm" method="post" action="x ...

  9. Servlet、Filter、Listener、Interceptor基础

    第一:Servlet Servlet是个接口,全限定名是javax.servlet.Servlet,在javax.servlet包中,在servlet-api.jar(在tomcat自带的lib文件夹 ...

  10. Codeforces Round 371 Div2 B.Passwords

    原题: B. Passwords time limit per test 2 seconds memory limit per test 256 megabytes input standard in ...