主要特性：

  • 不需要修改任何的元素的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的更多相关文章

  1. 超棒的自定义超酷滚动条jQuery插件 - Perfect Scrollbar

    可能大家厌倦了千篇一律的页面滚动条,如果你希望能够设计出与众不同的页面UI设计的话,Perfect ScrollBar可能就是你寻找的解决方案. 这个滚动条来自于一个个人项目,一个简单但是非常棒的滚动 ...

  2. jQuery自定义滚动条样式插件mCustomScrollbar

    如果你构建一个很有特色和创意的网页,那么肯定希望定义网页中的滚动条样式,这方面的 jQuery 插件比较不错的,有两个:jScrollPane 和 mCustomScrollbar. 关于 jScro ...

  3. WPF 自定义滚动条（ScrollView、ScrollBar）样式

    一.滚动条基本样式 本次修改Scrollview及ScrollBar滚动条样式是通过纯样式实现的.修改的内容包含滚动条的颜色,上下按钮的隐藏.另外添加了鼠标经过滚动条动画. style样式如下: &l ...

  4. jquery自定义滚动条 鼠标移入或滚轮时显示 鼠标离开或悬停超时时隐藏

    一.需求: 我需要做一个多媒体播放页面,左侧为播放列表,右侧为播放器.为了避免系统滚动条把列表和播放器隔断开,左侧列表的滚动条需要自定义,并且滚动停止和鼠标离开时要隐藏掉. 二.他山之石: 案例来自h ...

  5. 自定义jQuery插件Step by Step

    1.1.1 摘要 随着前端和后端技术的分离,各大互联网公司对于 Mobile First理念都是趋之若鹜的,为了解决网页在不同移动设备上的显示效果,其中一个解决方案就是Responsive Desig ...

  6. 1.ssm web项目中的遇到的坑--自定义JQuery插件（slide menu）

    自定义的JQuery插件写的回调函数不执行: 写好了回调函数,将函数打印出来是原形,就是不执行 function () { console.log("---onClickItem---&qu ...

  7. Perfect Scrollbar – 完美的 jQuery 滚动条插件

    Perfect Scrollbar 是一个很小的,但完美的 jQuery 滚动插件.滚动条不会影响原来的设计布局,滚动条的设计是完全可定制的.你可以改变几乎所有的 CSS 样式的滚动条,滚动条设计对脚 ...

  8. jQuery 自定义网页滚动条样式插件 mCustomScrollbar 的介绍和使用方法(转)

    系统默认的滚动条样式,真的已经看的够恶心了.试想一下,如果在一个很有特色和创意的网页中,出现了一根系统中默认的滚动条样式,会有多么的别扭. 为了自己定义网页中的滚动条的方法,我真的已经找了很久了,就目 ...

  9. 【JQuery插件】元素根据滚动条位置自定义吸顶效果

    ;(function($){ $.fn.extend({ /* 元素根据滚动条位置自定义吸顶插件 @defaultTop 初始化top位置 @startTop 开始滚动和回复原样的位置 @demo v ...

随机推荐

  1. WORD表格数据运算技巧

    我们经常会用WORD制作表格,有时表内的数据要运算的,WORD表格数据运算能力无法与EXCEL相比.但常见的乘除加减.相邻数据累加,将金额数字自动转成大写,WORD都能在表格内自动完成.下面以一个简单 ...

  2. Shiro：学习笔记(1)——身份验证

    Shiro——学习笔记(1) 1.核心概念 1.Shiro不会自己去维护用户.维护权限:这些需要我们自己去设计/提供:然后通过相应的接口注入给Shiro.2.应用代码直接交互的对象是Subject,也 ...

  3. c++之helloworld与命名空间

    首先在linux中需要安装g++编译器. 在中端输入 uname -a,可以查看版本信息. 输入g++,如果提示错误.则需要使用sudo apt-get install g++. #include&l ...

  4. Java多线程系列 JUC线程池05 线程池原理解析(四)

    转载 http://www.cnblogs.com/skywang12345/p/3544116.html  https://blog.csdn.net/programmer_at/article/d ...

  5. MyBatis入门级Demo

    1.创建Java工程MyBatisTest001,导入jar包(mybatis-3.2.1/mysql-connector-java-5.1.24-bin); 2.创建User表,数据库(MySql) ...

  6. 算法（Algorithms）第4版 练习 1.3.31

    双向链表实现: //1.3.31 package com.qiusongde.linkedlist; public class DoublyLinkedList<Item> { priva ...

  7. Docker学习（二）

    docker run ubuntu /bin/echo 'Hello world' docker run -t -i ubuntu /bin/bash docker run  命令运行一个容器 -t ...

  8. JavaWeb -- Session应用实例 -- 随机中文验证码 检验

    注册页面 login.html <?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE html ...

  9. 012_流式计算系统（Mahout协同过滤）

    课程介绍 课程内容 1.Mahout是什么 l  Mahout是一个算法库,集成了很多算法. l  Apache Mahout 是 Apache Software Foundation(ASF)旗下的 ...

  10. python循环切片

    x = [0,99, 'a', 1, 2, 'b',5, 3, 0,'a' ,1, 8, 5,'b',5,9,5] b=[] c=[] d=[] for i in range(len(x)): if ...