jQuery自定义滚动条完整实例

本文实例讲述了jQuery自定义滚动条实现方法。分享给大家供大家参考，具体如下：

很多时候，由于美观上的考虑，往往需要自定义各种各样的滚动条，因此，本人做了一个演示

运行效果截图如下：

以下是代码部分：

超文本标记语言头脚本类型=' text/JAVAScript ' src=' http : jquery-1。9 .1 .量滴js /脚本脚本$(function(){ //内容高度定义变量内容=$(' # div 2 ')；//框的高度var box=$(' # div 1 ')；//自定义的滚动条var滚动条=$(' # div 3 ')；var scroll=函数(内容、框、滚动条){ var BigHeight=内容。高度()；var小高度=箱。高度()；变化率=小高度/大高度；var h=Math.floor(费率*高度小)；滚动条。高度(h)；var offset=box。偏移量()var offset=offset。排名前1；scrollbar.mousedown(函数(e){ var diofsett=滚动条。偏移量().顶部；var TeSt=e . Pagey-Divoff ett；函数move(e){ var NewH=e . Pagey-TeSt-offset；if(Newh 0){ Newh=0；} else if(NewH(小高度-h)){ NewH=小高度-h；} var率2=(NewH h)/小身高；var contentH=数学。地板(BigHaut * rate 2-小高度)；content.css('top '，-contentH ' px ')；scrollbar.css('top '，NewH ' px ')；} $(“正文”).on('mousemove '，move)；$(“正文”).mouse up(function(){ $(“body”)).off('mousemove '，move)；});});}滚动（内容、框、滚动条);});/script style * { margin 33600；padd : 0；} body { font-size : 12px} # div 1 { width : 200 pxh three : 300 pxmargin : 50px自动；相对位置：_overflow:隐藏；border: 1px固体# 000;} # div2 {宽度： 180px绝对位置：top : 0；左侧： 5px} # div3 {宽度： 10px绝对位置：top : 0；右：5px背景技术： # 000;}/style/head body div id=' div 1 ' div id=' div 3 '/div id=' div 2 ' 1 br 1 br 1 br 1 br 1 br 1 br 1 br 1 br 1 br 1 br 1 br 1 br 1 br 1 br 1 br 1 br 1 br 1 br 1 br 1 br 1 br 1 br 1 br 1 br 1 br 1 br 1 br 1 br 1 br 1 br 1 br 1 br 1 br 1 br 1 br 1 br 1 br 1 br 1 br 1 br 1 br 1 br 1 br/div/文本区域名称=' '希望本文所述对大家jQuery程序设计有所帮助。