javascript自定义滚动条实现代码

.wapper{scrollbar-3dlight-color:#000; position:relative; height:302px;width:300px;overflow:hidden;margin:0 auto;line-height:40px;text-align:center;}
 .area{background-color:#E2E2EF;width:100%; position:absolute;top:0px;left:0px;}
 .bar{position:absolute;top:0px;right:0px; height:100%;width:1rem;background-color:#ccc;}
 .scroll,.middle,.forward,.backward{display:block;cursor:pointer;position:absolute;right:0px;width:100%;}
 .forward,.backward{height:16px;background-color:#6868B1;}
 .middle{background-color:rgba(255, 255, 255, 0.22);top:16px;cursor:auto;}
 .scroll{position:absolute;top:0px;background-color:#C2C2E9;}
 .forward{top:0px;}
 .backward{bottom:0px;}

<div class="wapper">
 <div class="area">
 <p>1、this is content</p>
 <p>2、this is content</p>
 <p>3、this is content</p>
 <p>4、this is content</p>
 <p>5、this is content</p>
 <p>6、this is content</p>
 <p>7、this is content</p>
 <p>8、this is content</p>
 <p>9、this is content</p>
 <p>10、this is content</p>
 <p>11、this is content</p>
 </div>
 <div class="bar">
 <span class="forward"></span>
 <span class="middle"><em class="scroll"></em></span>
 <span class="backward"></span>
 </div>
</div>
 
<script type="text/javascript" src="../../lib/seajs/sea.js"></script>
<script type="text/javascript" src="../../lib/base/1.0.x/base.js"></script>
<script type="text/javascript">
seajs.use(['lib/jquery/1.11.x/index.js', '_example/simulationScroll/simulationScroll.js'], function($, scroll) {
 scroll.init({
 wapper: $('.wapper'),
 distance: 10,
 });
});

define(function(require, exports, module) {
 
 'use strict';
 
 var $ = require('lib/jquery/1.11.x/index.js');
 
 var parameter = null;
 
 //检测设备类型
 var startWhen, endWhen, moveWhen;
 var u = navigator.userAgent;
 
 if ( u.match(/\b(Windows\sNT|Macintosh)\b/) ) {
 // 鼠标
 startWhen = 'mousedown';
 endWhen = 'mouseup';
 moveWhen = 'mousemove';
 } else {
 // 触摸屏
 startWhen = 'touchstart';
 endWhen = 'touchend';
 moveWhen = 'touchmove';
 }
 
 var simulation = {
 
 _mousedownTimer: 0,
 _setintervalId: 0,
 _longClick: false, //是否长点击
 _turnOf: null, //滚动方向
 
 init: function(options) {
 
 var t = this;
 
 t._scroll = $('.scroll'); //滚动条
 
 t._wapper = options.wapper.find('.area'); //内容区域
 t._distance = options.distance; //点击上下按钮页面每次滚动的距离
 
 var forward = $('.forward'),
 middle = $('.middle'),
 backward = $('.backward');
 
 parameter = {
 view: t._wapper.parent().innerHeight(), //视图高度
 page: t._wapper.height(), //内容高度
 barArea: 0, //滚动条可移动范围
 scrollHeight: 0, //滚动条的高度
 scrollDistance: 0 //滚动条每次滚动的距离
 };
 
 //初始化滚动条
 if (parameter.page > parameter.view) {
 
 //滚动条可移动范围
 middle.height( parameter.view - forward.height() * 2);
 
 parameter.barArea = middle.height();
 
 //滚动条高度 = 滚动条可滚动范围 / （页面高度 / 可视高度）的百分比
 parameter.scrollHeight = parameter.barArea / (parameter.page / parameter.view) ;
 t._scroll.height(parameter.scrollHeight);
 
 //滚动条每次滚动的距离 = 滚动条可移动范围 * 页面每次滚动的百分比
 parameter.scrollDistance = parameter.barArea / (parameter.page / t._distance) ;
 
 //拖动滚动条
 t.liveEvent();
 
 //点击向前按钮,如果按下鼠标到松开鼠标的时长<100ms,则为单次点击
 forward.bind(startWhen, function(e){
 
 t._turnOf = 'forward';
 
 t.longPress(e, t.direction );
 
 }).bind(endWhen, function(e) {
 
 t.mouseupFun(e, t.direction);
 
 t._turnOf = null;
 
 });
 
 //点击向后按钮
 backward.bind(startWhen, function(e){
 
 t.longPress(e, t.direction );
 
 }).bind(endWhen, function(e){
 
 t.mouseupFun(e, t.direction );
 
 });
 
 //注册鼠标滚动事件
 // FF
 if(document.addEventListener){
 document.addEventListener('DOMMouseScroll',t.mouseRuning,false);
 }
 
 //其它浏览器
 document.onmousewheel = t.mouseRuning;
 }
 },
 
 //鼠标滚动
 mouseRuning: function(e) {
 
 var t = simulation;
 
 e = e || window.event;
 
 //ie、FF
 if (e.detail) {
 if (e.detail < 0) {
 
 t._turnOf = 'forward';
 
 t.direction ();
 
 } else{
 
 t._turnOf = null;
 t.direction ();
 }
 // chrome
 } else if(e.wheelDelta) {
 
 if (e.wheelDelta > 0) {
 
 t._turnOf = 'forward';
 
 t.direction ();
 
 } else{
 
 t._turnOf = null;
 t.direction ();
 
 }
 }
 },
 
 //判断是否长点击
 longPress: function(e, moveFun ) {
 
 var t = this;
 
 if ( u.match(/\b(Windows\sNT|Macintosh)\b/) ) {
 e = e || window.event;
 
 // 为鼠标左键点击才触发
 if (/^mouse/.test(e.type) && e.which !== 1) {
 return;
 }
 }
 
 t._setintervalId = setInterval(function(){
 
 t._mousedownTimer += 10;
 
 if( t._mousedownTimer >= 100 ){
 
 moveFun();
 }
 
 },20);
 },
 
 mouseupFun: function(e, moveFun) {
 
 var t = this;
 
 if ( u.match(/\b(Windows\sNT|Macintosh)\b/) ) {
 e = e || window.event;
 
 // 为鼠标左键点击才触发
 if (/^mouse/.test(e.type) && e.which !== 1) {
 return;
 }
 }
 
 clearTimeout(t._setintervalId);
 
 if( t._mousedownTimer < 100 ) {
 
 moveFun();
 }
 
 t._mousedownTimer = 0;
 },
 
 direction:function() {
 var t = simulation,
 barTop = t._scroll.position().top,
 pageTop = t._wapper.position().top,
 moveDistance = {};
 
 if ( t._turnOf === 'forward') {
 
 //页面到顶，不执行任何操作
 if (barTop == 0) {
 return;
 }
 
 moveDistance = {
 page: pageTop + t._distance,
 bar: barTop - parameter.scrollDistance
 }
 
 //如果滚动条距离顶部的距离少 < 每次滚动的距离，或者已经滚动到顶部，则不再滚动
 if(barTop < parameter.scrollDistance || barTop <= 0){
 
 moveDistance = {
 page: 0,
 bar: 0
 }
 }
 
 } else {
 
 //页面到底，不执行任何操作
 if (barTop == parameter.barArea - parameter.scrollHeight){
 return;
 }
 
 moveDistance = {
 page: pageTop - t._distance,
 bar: barTop + parameter.scrollDistance
 };
 
 // 如果滚动条距离底部的距离值 < 每次滚动的距离 或者已经到底部，则一次滚到底
 if ( moveDistance.bar + parameter.scrollHeight >= parameter.barArea) {
 
 moveDistance = {
 page: parameter.view - parameter.page,
 bar: parameter.barArea - parameter.scrollHeight
 };
 
 }
 }
 
 t._scroll.css({top: moveDistance.bar});
 t._wapper.css({top: moveDistance.page});
 },
 
 //拖动滚动条
 liveEvent: function() {
 var t = this,
 draging = false,
 currentY = 0,
 lastY = 0,
 pageY = 0;
 
 //检测设备类型
 var _ua = function(e) {
 
 var Pos = null;
 
 if ( u.match(/\b(Windows\sNT|Macintosh)\b/) ) {
 e = e || window.event;
 
 // 为鼠标左键点击才触发
 if (/^mouse/.test(e.type) && e.which !== 1) {
 return;
 }
 
 Pos = {
 left : e.pageX,
 top: e.pageY
 }
 
 } else {
 Pos = {
 left : e.originalEvent.targetTouches[0].pageX,
 top: e.originalEvent.targetTouches[0].pageY
 }
 }
 return Pos;
 };
 
 var _start = function(e) {
 
 //监控鼠标
 e.preventDefault();
 
 if (t._scroll.get(0).setCapture) {
 t._scroll.get(0).setCapture();
 }
 
 draging = true;
 
 //记录当前滚动条的坐标
 lastY = t._scroll.position().top;
 
 //记录按下鼠标的坐标
 pageY = _ua(e).top;
 };
 
 var _drag = function(e) {
 
 if( draging ) {
 
 var pageTop = t._wapper.position().top;
 var barTop = t._scroll.position().top;
 
 //滚动条每移动1px，页面相对滚动Npx 再 * 当前滚动条的到顶部的距离
 var pageMoveDistance = -(parameter.page / (parameter.barArea / 1)) * barTop;
 
 if (lastY + ( _ua(e).top - pageY ) < 0) {
 currentY = 0;
 pageMoveDistance = 0;
 
 } else if( lastY + ( _ua(e).top - pageY) + parameter.scrollHeight >= parameter.barArea) {
 currentY = parameter.barArea - parameter.scrollHeight;
 pageMoveDistance = parameter.view - parameter.page;
 }
 else {
 currentY = lastY + ( _ua(e).top - pageY);
 }
 
 t._scroll.css({ top:currentY});
 t._wapper.css({top: pageMoveDistance});
 }
 };
 
 var _end = function(e) {
 
 if (draging) {
 
 draging = false;
 
 //在IE下释放对鼠标的控制
 if (t._scroll.get(0).setCapture) {
 t._scroll.get(0).releaseCapture();
 }
 
 document.onmousemove = null;
 document.onmouseup = null;
 }
 };
 
 t._scroll.bind( startWhen, _start );
 
 t._wapper.bind( startWhen, _start );
 
 $(document).bind( moveWhen, _drag );
 
 $(document).bind( endWhen, _end );
 
 $(document).bind('blur', _end);
 }
 }
 return simulation;
});