可以自由的给滚动条定义背景，上下按钮，当然不仅仅是颜色，连图片当背景也可以。支持鼠标滚轮，点击滚动条滚轴定位，上下按钮久按加速，兼容 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. 收集一些有意思的ASCII程序注释（持续收集中，希望大家踊跃贡献）

      /** * * created by Mr.Simple, Aug 21, 20141:51:40 PM. * Copyright (c) 2014, hehonghui@umeng.com Al ...

  2. matlab中xlsread函数的bug

    在使用[num txt data]=xlsread('filename')时.num存所有数值型数据,非数值型用NaN表示,txt存非数值型数据,数值型数据的位置为空. 如果filename中的第一行 ...

  3. lnmp 一键安装

    系统需求: CentOS/RHEL/Fedora/Debian/Ubuntu/Raspbian/Deepin Server/Aliyun/Amazon/Mint Linux发行版 需要5GB以上硬盘剩 ...

  4. Android 7.0 出现 ”FileUriExposedException“ 和 ”解析包出现错误“ 异常的解决办法

    问题1 :android.os.FileUriExposedException: file:///storage/emulated/0/Android/data/com.xxx.xxx.xxx.rel ...

  5. Install OpenCV3.0 on Eclipse

     Neste artigo veremos como usar o OpenCV com Eclipse. Usaremos as versões mais recentes:OpenCV 3.0 ...

  6. C++/C课程设计（2）工资管理系统功能说明

    原文取自个人博客:www.jycoder.com欢迎訪问 百度网盘下载源码:Demo.zip 百度网盘下载软件文档:软件文档.zip 工资管理系统 一,     基本功能要求: 1)以password ...

  7. MySQL循环语句实例教程 mysql while循环测试

    在mysql数据库中操作同样有循环语句操作,标准的循环方式: while 循环 . loop 循环和repeat循环.还有一种非标准的循环: goto. 鉴于goto 语句的跳跃性会造成使用的的思维混 ...

  8. 云服务器 nginx + tomcat 部署集群 配置

    nginx.conf #user nobody; worker_processes ; #error_log logs/error.log; #error_log logs/error.log not ...

  9. 译: 2. Apache Axis2安装指南

    Apache Axis2安装指南 本文档提供有关Axis2分发包,系统先决条件以及设置环境变量和工具的信息,然后提供有关安装方法的详细说明. 请将您的反馈发送至:java-dev@axis.apach ...

  10. pandas数组获取最大值索引的方法-argmax和idxmax

    pandas Series 的 argmax 方法和 idxmax 方法用于获取 Series 的最大值的索引值: 举个栗子: 有一个pandas Series,它的索引是国家名,数据是就业率,要找出 ...