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

    开发的时候碰到这样的需求:需要在一个系统(客户端发送请求)中将文件传输至另外一个系统(服务端接收)中去的实现方式,可以批量传输文件,代码如下: 客户端请求: public String upLoadF ...

  2. Java数据结构和算法（四）：栈

    一.简介 栈(英语:stack)又称为堆栈或堆叠,栈作为一种数据结构,是一种只能在一端进行插入和删除操作的特殊线性表.它按照先进后出的原则存储数据,先进入的数据被压入栈底(Bottom),最后的数据在 ...

  3. zabbix 实现对服务器的负载监控

    # grep Include /etc/zabbix/zabbix_agentd.conf ### Option: Include # Include= Include=/etc/zabbix/zab ...

  4. how-apache-flink-enables-new-streaming-applications-part-1

    https://data-artisans.com/blog/how-apache-flink-enables-new-streaming-applications-part-1 http://www ...

  5. Flink KAFKA

    https://data-artisans.com/blog/kafka-flink-a-practical-how-to https://github.com/dataArtisans/kafka- ...

  6. ubuntu创建用户命令

    可以用adduser和useradd来添加用户,用userdel来删除用户. 最简单的命令:sudo adduser test会自动同名组,创建/home/test/,从etc/skel/复制文件,并 ...

  7. XnView查看图片实际大小

    找了很多软件,只有它可以显示尺寸大小. 各位如有别的发现,可留言推荐,谢谢

  8. 【Ensemble methods】组合方法&集成方法

    机器学习的算法中,讨论的最多的是某种特定的算法,比如Decision Tree,KNN等,在实际工作以及kaggle竞赛中,Ensemble methods(组合方法)的效果往往是最好的,当然需要消耗 ...

  9. Pandas Dataframe增、删、改、查、去重、抽样基本操作

    总括 pandas的索引函数主要有三种: loc 标签索引,行和列的名称 iloc 整型索引(绝对位置索引),绝对意义上的几行几列,起始索引为0 ix 是 iloc 和 loc的合体 at是loc的快 ...

  10. html页面去掉滚动条

    有时候特别需要,个别网页要去掉横向滚动条和竖向滚动条,那该怎么去掉呢,很简单,看代码: 让竖条没有: <body style=`overflow:-Scroll;overflow-y:hidde ...