可能大家厌倦了千篇一律的页面滚动条,如果你希望能够设计出与众不同的页面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_5877_Weak Pair(离散+DFS+树状数组)

    题目链接:hdu_5877_Weak Pair 题意: 给你一棵树,让你找有多少对满足那两个条件的weak pair 题解: 有人用Treap,我不会,然后我用树状数组+离散来替代Treap,用DFS ...

  2. 1、Spring概述

    Java EE优缺点 我们都知道在2003年Spring兴起之前,企业普遍使用J2EE技术来开发企业级应用,为什么用J2EE呢?主要原因有以下几个: 1.Java本身的跨平台能力,可移植性强2.J2E ...

  3. DOS/VBS - 用 bat 批处理 实现自动telnet

    一.VBS法 1. 建立一个tel.vbs脚本 '建立Shell对象 set sh=WScript.CreateObject("WScript.Shell") WScript.Sl ...

  4. BestCoder Round #85 A B C

    本来没有写博客的打算,可是看完了题解感觉这三道题这么水,我却只做出来一道,实在不应该,还是写点东西吧…… A.sum 问题描述 给定一个数列,求是否存在连续子列和为m的倍数,存在输出YES,否则输出N ...

  5. 【FBA】SharePoint 2013自定义Providers在基于表单的身份验证(Forms-Based-Authentication)中的应用

    //http://www.cnblogs.com/OceanEyes/p/custom-provider-in-sharepoint-2013-fba-authentication.html 由于项目 ...

  6. 查看mms UA/profile

    查看彩信的UA/profile信息,当然可以通过打印log来看. 但还有一个比较简便的方法: 直接抓取一个MMS包,用网络包分析工具打开,找到承载该MMS信息的HTTP协议包即可查看:

  7. SSL+socket详解

    转自:http://hengstart.iteye.com/blog/842529 一.        SSL概述 SSL协议采用数字证书及数字签名进行双端实体认证,用非对称加密算法进行密钥协商,用对 ...

  8. photoshop的页面制作练习2

  9. Hibernate框架--对象的状态,缓存, 映射

    回顾Hibernate第二天: 1.  一对多与多对一 2. 多对多 3. inverse/cascade 4. 关联关系的维护 一对多: <set name="映射的集合属性&quo ...

  10. 用xftp传送避免乱码问题

    用xftp传送文件时,需要输入ip地址,可连通的端口号,采用sftp协议 输入数据库传送,属性binary,二进制 上传文件,图片中文名称正常显示等,需要该属性支持UTF-8