可以自由的给滚动条定义背景，上下按钮，当然不仅仅是颜色，连图片当背景也可以。支持鼠标滚轮，点击滚动条滚轴定位，上下按钮久按加速，兼容 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. .net framework多个版本在IIS服务器上时应注意-重新注册IIS-错误Server Application Unavailable

    今天客户一个附件上传的应用程序报错,服务器安装了.net 4.0 framework(还有1.0和2.0版本),因为有网站程序需要用到2.0,配置好站点后,附件程序是用的2.0,Mail程序选择版本为 ...

  2. Vue 的开始

    1 框架的 MVVM 模式 ViewModel是Vue.js的核心,它是一个Vue实例.Vue实例是作用于某一个HTML元素上的,这个元素可以是HTML的body元素,也可以是指定了id的某个元素. ...

  3. JDK1.5新特性，基础类库篇，扫描类（Scanner）用法

    一. 背景 这是一个简单的文本扫描类,能够解析基本数据类型与字符串.它是StringTokenizer和Matcher类之间的某种结合. 最大的优点是读取控制台输入非常方便,其它功能,有点鸡肋. 二. ...

  4. Bug:java.lang.StackOverflowError: stack size 8MB

    在开发的时候遇到了这个Bug:java.lang.StackOverflowError: stack size 8MB Log: 11-27 14:16:37.093 21892-21892/com. ...

  5. java https 请求

    http://li3huo.com/index.php/2009/09/https-certificates-are-ignoring-the-right-java-http-client/

  6. 【Unity】11.1 角色控制器 (Character Controller)

    分类:Unity.C#.VS2015 创建日期:2016-05-02 一.简介 角色控制器(Character Controller)主要用于对第三人称或第一人称游戏主角的控制.如果要创建类人角色,可 ...

  7. 有用的 JS 和 CSS 库

    1. Moon Moon 是一个灵感源于 Vue.js 的 JavaScript UI 库,但它却更轻量.简单.它具备优化的虚拟 DOM 引擎,对用户友好的 API,并且在 gzip 压缩后仅有 6K ...

  8. 《深入应用C++11：代码优化与工程级应用》开始发售

    我的新书<深入应用C++11:代码优化与工程级应用>已经开始在华章微店发售了,下面是链接. 京东发售链接 china-pub发售链接 亚马逊发售链接 天猫商城发售链接 适用读者:C++11 ...

  9. DIOCP开源项目-DIOCP3的ECHO测试<贴图>

    星期六开了测试台测试机子.星期天休息,今天早上来接两个图 开了2个客户端,一个qsl的echo client,一个是楠楠的dbiocp回调客户端.建立13240个连接 今天来后,机子很卡,后来发现是楠 ...

  10. spring-kafka手动提交offset

    <?xml version="1.0" encoding="UTF-8"?> <beans xmlns="http://www.sp ...