可以自由的给滚动条定义背景，上下按钮，当然不仅仅是颜色，连图片当背景也可以。支持鼠标滚轮，点击滚动条滚轴定位，上下按钮久按加速，兼容 ie，firefox，chrome。

调用方法：

$("#a").jscroll();

demo：

<!DOCTYPE HTML>

<html lang="en-US">

<head>

    <meta charset="UTF-8"/>

    <title>demo</title>

    <link rel="stylesheet" type="text/css" href="/css/base.min.css" media="all"/>

    <style type="text/css">

    #a{width:500px;overflow:hidden;position:relative;height:200px;background:#f5f5f5;}

    </style>

</head>

<body>

    <div id="a">

        <p>测试文字</p>

        <p>测试文字</p>

        <p>测试文字</p>

        <p>测试文字</p>

        <p>测试文字</p>

        <p>测试文字</p>

        <p>测试文字</p>

        <p>测试文字</p>

        <p>测试文字</p>

        <p>测试文字</p>

        <p>测试文字</p>

        <p>测试文字</p>

        <p>测试文字</p>

        <p>测试文字</p>

        <p>测试文字</p>

        <p>测试文字</p>

        <p>测试文字</p>

        <p>测试文字</p>

        <p>测试文字</p>

        <p>测试文字</p>

        <p>测试文字</p>

        <p>测试文字</p>

        <p>测试文字</p>

        <p>测试文字</p>

        <p>测试文字</p>

        <p>测试文字</p>

        <p>底部</p>

    </div>

</body>

</html>

<script type="text/javascript" src="/js/jquery.min.js"></script>

<script type="text/javascript" src="/js/jquery.jscroll.js"></script>

<script type="text/javascript">

$(function(){

    $("#a").jscroll();

});

</script>

高级应用（自定义滚动条背景及上下按钮）：

调用图片：

demo：

<!DOCTYPE HTML>

<html lang="en-US">

<head>

    <meta charset="UTF-8"/>

    <title>demo</title>

    <link rel="stylesheet" type="text/css" href="/css/base.min.css" media="all"/>

    <style type="text/css">

    #a{width:500px;overflow:hidden;position:relative;height:200px;background:#f5f5f5;}

    </style>

</head>

<body>

    <div id="a">

        <p>测试文字</p>

        <p>测试文字</p>

        <p>测试文字</p>

        <p>测试文字</p>

        <p>测试文字</p>

        <p>测试文字</p>

        <p>测试文字</p>

        <p>测试文字</p>

        <p>测试文字</p>

        <p>测试文字</p>

        <p>测试文字</p>

        <p>测试文字</p>

        <p>测试文字</p>

        <p>测试文字</p>

        <p>测试文字</p>

        <p>测试文字</p>

        <p>测试文字</p>

        <p>测试文字</p>

        <p>测试文字</p>

        <p>测试文字</p>

        <p>测试文字</p>

        <p>测试文字</p>

        <p>测试文字</p>

        <p>测试文字</p>

        <p>测试文字</p>

        <p>测试文字</p>

        <p>底部</p>

    </div>

</body>

</html>

<script type="text/javascript" src="/js/jquery.min.js"></script>

<script type="text/javascript" src="/js/jquery.jscroll.js"></script>

<script type="text/javascript">

$(function(){

    $("#a").jscroll({

        W:"15px",    //设置滚动条宽度

        BgUrl:"url(/images/s_bg2.gif)",    //设置滚动条背景图片地址

        Bg:"right 0 repeat-y",    //设置滚动条背景图片position,颜色等

        Bar:{

            Pos:"bottom",    //设置滚动条初始化位置在底部

            Bd:{    //设置滚动滚轴边框颜色：鼠标离开(默认)，经过

                Out:"#a3c3d5",

                Hover:"#b7d5e6"

            },

            Bg:{    //设置滚动条滚轴背景：鼠标离开(默认)，经过，点击

                Out:"-45px 0 repeat-y",

                Hover:"-58px 0 repeat-y",

                Focus:"-71px 0 repeat-y"

            }

        },

        Btn:{

            btn:true,    //是否显示上下按钮 false为不显示

            uBg:{    //设置上按钮背景：鼠标离开(默认)，经过，点击

                Out:"0 0",

                Hover:"-15px 0",

                Focus:"-30px 0"

            },

            dBg:{    //设置下按钮背景：鼠标离开(默认)，经过，点击

                Out:"0 -15px",

                Hover:"-15px -15px",

                Focus:"-30px -15px"

            }

        },

        Fn:function(){}    //滚动时候触发的方法

    });

});

</script>

下载 --> jquery.jscroll.js

原文地址：jquery滚动条jscroll美化滚动条,自定义滚动条

【jquery】jquery 自定义滚动条的更多相关文章

  1. 使用jquery.mCustomScrollbar自定义滚动条（4）live使用，向未来元素添加滚动条，不实用，了解一下

    .div_box元素是本来没有的,在滚动条初始化的时候方法是加在$('.content .div_box').mCustomScrollbar()上面,参数live:on; 点击按钮的时候,进行con ...

  2. 使用jquery.mCustomScrollbar自定义滚动条（3）callback onCreate

    碰到了一个问题,想简洁,所以在页面上使用 <div class="div_box mCustomScrollbar" data-mcs-theme="dark-3& ...

  3. 使用jquery.mCustomScrollbar自定义滚动条（2）

    参考博客:http://www.qianxingzhem.com/post-1602.html 接着上篇,另一个使用的例子,使用js来初始化滚动条,并且div中的内容可变化.需要调用相应的方法, 代码 ...

  4. 使用jquery.mCustomScrollbar自定义滚动条（1）

    参考博客:https://blog.csdn.net/cdnight/article/details/41351505 api网址:http://manos.malihu.gr/jquery-cust ...

  5. 基于jQuery的自定义滚动条

    在线演示 本地下载

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

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

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

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

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

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

  9. Javascript和jquery事件--滚动条事件和自定义滚动条事件样式

    很想把滚动条事件跟鼠标滚轮事件放在一起,那就直接写在这一篇了.除了事件以外,对滚动条样式的调整也记在这里吧. 滚动条是浏览器的默认事件,使用overflow:auto/scroll都有可能出现,它的默 ...

随机推荐

  1. C#基础第二天-作业-九九乘法表-打印星星

    一.打印九九乘法表图形为下列效果图中的三角型的一种例: 图一效果1*1=1 1*2=2 2*2=4 1*3=3 2*3=6 3*3=9 1*4=4 2*4=8 3*4=12 4*4=16 1*5=5 ...

  2. Oracle 11g安装，新建表空间和用户

    windows版: 官网下载,两个压缩包,总共2G,解压到同一个文件夹下,setup.exe双击执行,首次安装的话,一直下一步就可以了,最后一步可能时间比较长,等着就好了,一般性能的机器大概要半小时左 ...

  3. Intellij dea 注释行如何自动缩进?

    Intellij dea 注释行如何自动缩进?   进入 Settings -> Code Style -> Java ,在右边选择 “Code Generation” Tab,然后找到 ...

  4. libsvm_readme[zz from github]

    Libsvm is a simple, easy-to-use, and efficient software for SVM classification and regression. It so ...

  5. 闭包（Closures）

    本文转自:http://goddyzhao.tumblr.com/post/11311499651/closures 翻译自:http://dmitrysoshnikov.com/ 概要 本文将介绍一 ...

  6. 查询系统负载信息 Linux 命令详解

    linux uptime命令主要用于获取主机运行时间和查询linux系统负载等信息.uptime命令过去只显示系统运行多久.现在,可以显示系统已经运行了多长 时间,信息显示依次为:现在时间.系统已经运 ...

  7. Oozie-自定义实现WorkFlow中shell action

    拷贝默认的shell目录来进行修改 $ cp -r ./examples/apps/shell/ my-apps/ 定义job.properties nameNode=hdfs://bigdata-0 ...

  8. 【SSH】Hibernate关联映射

    一对一关联映射 一对一主键关联映射    一句话:不加字段.主键既是主键又是外键. 一对一单向主键关联映射 配置: <span style="font-family:KaiTi_GB2 ...

  9. apicloud开发笔记

    第一次用apicloud做正式项目 ,下面把做的过程中用到的代码段列出来....都是从文档里复制的代码,只是感觉官网那个文档好难找哦... 注:api.????的方法都是在APP中调用才行的,$api ...

  10. Atitit 软件项目系统托盘图标解决方案

    Atitit 软件项目系统托盘图标解决方案 1.1. Nodejs   node-webkit还实现了本地化的API,例如菜单栏,系统的托盘图标支持1 1.2. Java c# qt c++1 1.3 ...