【jquery】jquery 自定义滚动条
可以自由的给滚动条定义背景，上下按钮，当然不仅仅是颜色，连图片当背景也可以。支持鼠标滚轮，点击滚动条滚轴定位，上下按钮久按加速，兼容 ie，firefox，chrome。
调用方法：
$("#a").jscroll(); demo：
DOCTYPE HTML>
<html lang="en-US">
<head><meta charset="UTF-8"/><title>demotitle><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>demotitle><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美化滚动条,自定义滚动条
转载于:https://www.cnblogs.com/yjzhu/p/3267973.html
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！