jquery滚动条滚动事件,jquery滑动条,jQuery实现的自定义滚动条实例详解

本文主要介绍了jQuery实现的自定义滚动条，用完整的例子详细分析了jQuery自定义滚动条的实现步骤和相关操作技巧，并给出了jquery.jscroll.js插件的完整代码，有需要的朋友可以参考。

本文展示了由jQuery实现的自定义滚动条。分享给你，供你参考，如下：

你可以自由定义背景，上下按钮，当然不仅仅是颜色，还有图片作为背景。支持鼠标滚轮，点击滚动条定位，长按上下键加速，兼容ie、firefox、chrome。

调用方法：

$(#a )。jscroll()；

演示：

！文档类型HTML

html lang=en-US

头

meta charset=UTF-8/

title演示/标题

link rel= style sheet type= text/CSS href=/CSS/base . min . CSS media= all /

style type=text/css

# a { width:500 px；溢出：隐藏；位置：相对；高度：200px背景：# f5f5f5}

/风格

/头

身体

div id=a

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

脚本类型=文本/javascript

$(function(){

$(#a )。jscroll()；

});

/脚本

高级应用程序(自定义滚动条背景和上下按钮):

通话图片：

演示：

！文档类型HTML

html lang=en-US

头

meta charset=UTF-8/

title演示/标题

link rel= style sheet type= text/CSS href=/CSS/base . min . CSS media= all /

style type=text/css

# a { width:500 px；溢出：隐藏；位置：相对；高度：200px背景：# f5f5f5}

/风格

/头

身体

div id=a

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

脚本类型=文本/javascript

$(function(){

$(#a )。jscroll({

W:15px ，//设置滚动条宽度

Url: URL (/images/s _ bg2.gif)，//设置滚动条背景图片的地址

Bg:right 0 repeat-y ，//设置位置，颜色等。滚动条背景图片的。

酒吧：{

Pos:bottom ，//设置滚动条在底部的初始化位置

Bd:{ //设置滚轮边框颜色：鼠标左键(默认)，后

Out:#a3c3d5 ，

悬停： #b7d5e6

Bg:{ //设置滚动条背景：鼠标离开(默认)、经过、点击。

out:“-45px 0重复-y”，

悬停：“-58px 0重复-y”，

焦点：“-71px 0重复-y”

}

Btn:{

Btn:true，//是否显示上下按钮。false表示不显示。

UBg:{ //设置上方按钮的背景：鼠标离开(默认)、经过、点击。

传出：“0 0”，

悬停：“-15px 0”，

焦点：“-30px 0”

DBg:{ //设置向下按钮的背景：鼠标离开(默认)、经过、点击。

输出：“0 -15px”，

悬停：-15px -15px ，

焦点：-30px -15px

}

Fn:function(){} //滚动时触发的方法

});

/脚本

jquery.jscroll.js:

/**

* http://www.winwill.com

* http://www.winwill.com/jquery/jscroll.html

* admin@winwill.com

/* - */

$.fn.extend({//添加滚轮事件//由君

鼠标滚轮：功能(函数){

return this.each(function(){

var _ self=this

_self .d=0；//滚动方向

如果($。浏览器。msie | | $。浏览器。safari){

_ self。onmousewheel=function(){ _ self .d=event . wheel delta event . return value=false func func。调用(_ self)；};

}否则{

_ self。addevent侦听器( DOM鼠标滚动，函数(e){

_self .D=e.detail0？-1:1;

e。防止默认()；

func功能。调用(_ self)；

},假);

}

});

}

});

$.fn.extend({

jscroll:函数(j){

return this.each(function(){

j=j || {}

j.Bar=j . Bar | | { }；//2级对象

j.Btn=j . Btn | | { }；//2级对象

j.bar。Bg=j . bar。BG | | { }；//3级对象

j.bar。Bd=j . bar。BD | | { }；//3级对象

j.BTN。BTN。ubg | | { }；//3级对象

j.BTN。BTN。dbg | | { }；//3级对象

var jun={ W:15px

，BgUrl:" "

，Bg:#efefef

,条形：{ Pos:向上

，Bd:{Out:#b5b5b5 ，Hover:#ccc}

，Bg:{Out:#fff ，Hover:#fff ，Focus:orange}}

，Btn:{ btn:true

，uBg:{Out:#ccc ，Hover:#fff ，Focus:orange}

，dBg:{Out:#ccc ，Hover:#fff ，Focus:orange}}

，Fn:function(){}}

j.W=j . W | | jun . W

j.BgUrl=j . BgUrl | | jun . BgUrl

j.Bg=日本Bg | |六月Bg

j.bar。Pos=j . bar。位置| |六月酒吧。Pos

j.bar。BD。out=j . bar。BD。out | | jun . bar。BD。出；

j.bar。BD。悬停=j . bar。BD。悬停| |君.吧。BD。悬停；

j.bar。BG。out=j . bar。BG。out | | jun . bar。BG。出；

j.bar。BG。悬停=j . bar。BG。悬停| |君.吧。BG。悬停；

j.巴录书Bg。焦点=j . Bar。Bg.Focus | |君吧。背景聚焦君巴录书Bg。焦点

j.Btn.btn=j.Btn.btn！=未定义？日本Btn.btn:君BTN。BTN；

j.BTN。ubg。出局=BTN。ubg。出去| |六月. BTN。ubg。出；

j.BTN。ubg。哈弗=BTN。ubg。悬停| |六月. BTN。ubg。悬停；

j.BTN。ubg。聚焦=BTN。ubg。聚焦| |君. BTN。ubg。专注；

j.BTN。dbg。出局=BTN。dbg。出去| |六月. BTN。dbg。出；

j.BTN。dbg。哈弗=BTN。dbg。悬停| |六月. BTN。dbg。悬停；

j.BTN。dbg。聚焦=BTN。dbg。聚焦| |君. BTN。dbg。专注；

j.Fn=j . Fn | | jun . Fn

var _ self=this

var Stime，Sp=0，Isup=0；

$(_self).CSS({溢出：隐藏，位置：相对，填充： 0px })；

var dw=$(_self).width()，dh=$(_self).height()-1；

var sw=j.W？parse int(j . W):21；

var sl=dw - sw

var bw=j.Btn.btn==true？SW:0；

如果($(_self).孩子(。JSC罗尔-c’).height()==null){//存在性检测

$(_self).wrap inner( div class= jscroll-c style= top:0px；z指数：9999;缩放：1;position:relative /div )；

$(_self).孩子(。JSC罗尔-c’).prepend( div style= height:0px；溢出：隐藏/div’)；

$(_self).append( div class= jscroll-e unselect= on style= height:100%；top:0px；右：0;-moz-用户-选择：无；位置：绝对；溢出：隐藏；z指数：10000;div class= jscroll-u style= position:absolute；top:0px；宽度：100%;左：0;背景：蓝色；overflow:hidden /div div class= jscroll-h unselect= on style= background:green；位置：绝对；左：0;-moz-用户-选择：无；border:1px solid /div div class= jscroll-d style= position:absolute；底部：0px宽度：100%;左：0;背景：蓝色；溢出：hidden /div/div )；

}

var jscrollc=$(_self).孩子(。JSC罗尔-c’)；

var jscrolle=$(_self).孩子(。JSC罗尔——e’)；

var jscrollh=jscrolle.children( .JSC罗尔-h’)；

var jscrollu=jscrolle.children( .JSC卷-u’)；

var jscrolld=jscrolle.children( .JSC罗尔-d’)；

如果($。浏览器。msie){ document。exec命令(背景图像缓存，false，true)；}

jscrollc。CSS({ 右填充:SW })；

jscrolle.css({width:sw，background:j.Bg， background-image :j . BgUrl })；

jscrollh.css({top:bw，background:j.Bar.Bg.Out， background-image:j.BgUrl， border-color:j.Bar.Bd.Out，width:SW-2 })；

jscrollu.css({height:bw，background:j.Btn.uBg.Out， background-image :j . BgUrl })；

jscrolld.css({height:bw，background:j.Btn.dBg.Out， background-image :j . BgUrl })；

jscrollh。hover(function(){ if(Isup==0)$(this).css({background:j.Bar.Bg.Hover，背景-图像:j.BgUrl，边框-颜色:j.Bar。BD。hover })}，function(){if(Isup==0)$(this).css({background:j.Bar.Bg.Out，背景-图像：j.BgUrl，边框-颜色：j.Bar.Bd.Out})})

jscrollu。hover(function(){ if(Isup==0)$(this).背景：BTN。ubg。hover， background-image:j.BgUrl})}，function(){if(Isup==0)$(this).css({background:j.Btn.uBg.Out， background-image:j.BgUrl})})

jscrolld。hover(function(){ if(Isup==0)$(this).背景：BTN。dbg。hover， background-image:j.BgUrl})}，function(){if(Isup==0)$(this).css({background:j.Btn.dBg.Out， background-image:j.BgUrl})})

var sch=jscrollc。height()；

//var sh=Math.pow(dh，2)/sch；//Math.pow(x，y)x的y次方

var sh=(dh-2*bw)*dh/sch

if(sh10){sh=10}

var wh=sh/6//滚动时候跳动幅度

//sh=parse int(sh)；

var curT=0，允许=假

jscrollh。身高(sh)；

if(sch=DH){ jscrollc。CSS({ padding:0 })；JSC罗尔。CSS({ display: none })} else { allowS=true；}

if(j.Bar.Pos！=向上){

curT=DH-sh-bw；

setT()；

}

jscrollh.bind(mousedown ，函数(e){

j [[ Fn ]] j .调用(_ self)；

ISUP=1；

jscrollh。CSS({背景：j . bar。BG。焦点，“背景-图像”:j.BgUrl})

var pageY=e.pageY，t=parseInt($(this).CSS( top ))；

$(文档)。鼠标移动(函数(e2){

curT=t E2。佩吉-佩吉；//佩吉浏览器可视区域鼠标位置，screenY屏幕可视区域鼠标位置

setT()；

});

$(文档)。mouseup(function(){

ISUP=0；

jscrollh。CSS({背景：j . bar。BG。out，背景图像:j.BgUrl，边框颜色:j.Bar.Bd.Out})

$(文档)。unbind()；

});

返回错误的

});

jscrollu.bind(mousedown ，函数(e){

j [[ Fn ]] j .调用(_ self)；

ISUP=1；

jscrollu。背景：BTN。ubg。焦点，“背景-图像”:j.BgUrl})

_ self。timesett( u )；

$(文档)。mouseup(function(){

ISUP=0；

jscrollu。背景：BTN。ubg。out，背景图像:j.BgUrl})

$(文档)。unbind()；

清除超时(Stime)；

sp=0；

});

返回错误的

});

jscrolld.bind(mousedown ，函数(e){

j [[ Fn ]] j .调用(_ self)；

ISUP=1；

jscrolld。背景：BTN。dbg。焦点，“背景-图像”:j.BgUrl})

_ self。timesett( d )；

$(文档)。mouseup(function(){

ISUP=0；

jscrolld。背景：BTN。dbg。out，背景图像:j.BgUrl})

$(文档)。unbind()；

清除超时(Stime)；

sp=0；

});

返回错误的

});

_self.timeSetT=function(d){

var self=this

if(d== u ){ curT-=wh；} else { curT=wh}

setT()；

sp=2；

var t=500-Sp * 50；

if(t=0){ t=0 }；

stime=setTimeout(function(){ self。时间设置(d)；}，t)；

}

jscrolle.bind(mousedown ，函数(e){

j [[ Fn ]] j .调用(_ self)；

curT=curT e . pagey-jscrollh。偏移量().top-sh/2；

asetT()；

返回错误的

});

函数阿塞特(){

if(curT bw){ curT=bw；}

if(curT DH-sh-bw){ curT=DH-sh-bw；}

jscrollh.stop().animate({top:curT}，100)；

var scT=-((curT-bw)* sch/(DH-2 * bw))；

jscrollc.stop().animate({top:scT}，1000)；

};

函数setT(){

if(curT bw){ curT=bw；}

if(curT DH-sh-bw){ curT=DH-sh-bw；}

jscrollh。CSS({ top:curT })；

var scT=-((curT-bw)* sch/(DH-2 * bw))；

jscrollc。CSS({ top:scT })；

};

$(_self)。鼠标滚轮(函数(){

如果(允许！=true)返回；

j[Fn] j[Fn]。调用(_ self)；

如果(这个。d0){ curT-=wh；} else { curT=wh};

setT()；

})

});

}

});

对更多jQuery相关内容感兴趣的读者可以查看我们的专题：《jQuery窗口操作技巧总结》、《jQuery拖拽特效与技巧总结》、《jQuery常用插件及用法总结》、《jquery中Ajax用法总结》、《jQuery表格(table)操作技巧汇总》、《jQuery扩展技巧总结》、《jQuery常见经典特效汇总》、0700-79000、《jQuery动画与特效用法总结》、《jquery选择器用法总结》、0755-79000和0755。

希望这篇文章对jQuery编程的大家有所帮助。

jquery滚动条滚动事件,jquery滑动条,jQuery实现的自定义滚动条实例详解