可以自由的给滚动条定义背景，上下按钮，当然不仅仅是颜色，连图片当背景也可以。支持鼠标滚轮，点击滚动条滚轴定位，上下按钮久按加速，兼容 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. linux 免密码登录

    linux 免密码登录 配置 test 为本地linux 192.168.1.70 为远程linux [root@test:/home/root]$ssh-keygenGenerating publi ...

  2. EPI Server相关

    下载地址: http://world.episerver.com/download/Episerver-CMS/ 文档: http://world.episerver.com/documentatio ...

  3. 孰优孰劣？Dubbo VS Spring Cloud性能测试大对决！

    最近我们试图从Dubbo迁移到Spring Cloud.为此对二者分别进行了性能测试.为了得出数据量不同的情况下的二者的性能表现,我们分别准备了一个25个属性pojo对象和一个50个属性的pojo对象 ...

  4. HTML杂记

    1.URL  uniform resource locator 遵循格式: scheme://host.domain:port/path/filename scheme - 定义因特网服务的类型.最常 ...

  5. ssh以密钥的方式登录服务器时,只要有密钥可以登服务器,如果有密钥和公钥同时存在(在公钥没问题的情况下可以),但如果公钥有问题,就不能登录成功

    在~/.ssh/下如果只有密钥或公私同时存在时,都可以成功登录服务器,但!!!!!!如果公钥有换成别的服务器的公钥时,是无法登录远程的服务器!!!!

  6. 2-7-集合运算(A-B)∪(B-A)-线性表-第2章-《数据结构》课本源码-严蔚敏吴伟民版

    课本源码部分 第2章  线性表 - 集合运算(A-B)∪(B-A) ——<数据结构>-严蔚敏.吴伟民版        ★有疑问先阅读★ 源码使用说明  链接☛☛☛ <数据结构-C语言 ...

  7. sessionStorage 、localStorage、cookie

     特性  cookie  localStorage  sessionStorage  存储  浏览器端,同源限制   浏览器端,同源限制    浏览器端,同源限制    容量   <=4K  5 ...

  8. 【MyBean调试笔记】关于单元的释放顺序

    [概述] DEMO提交人:惠商软件  2508696439 问题描述:MDIConsole, DEMO如果Forms单元引用顺序放在mybean.console.pas文件之后如下图所示时: 创建同一 ...

  9. 阿里druid连接池监控配置

    首先在web.xml中添加如下配置: <filter> <filter-name>DruidWebStatFilter</filter-name> <filt ...

  10. css3 loading 效果

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...