customize scrollbar-自定义滚动条
吴靖
在google的一些应用中已经出现了自定义的scrollbar，比如google wave和google mail。和传统的滚动条相比，优势在于
- 体积很小，从而提供更多空间给内容
- 动态显示和隐藏
- 自定义的风格，可以配合整个网页的风格
- 对三个事件的捕捉：鼠标滚动事件捕捉，鼠标点击滚动条，鼠标拖动滚动条。
- 通过对这三个事件的捕捉，确定content的offset和滚动条的offset，他们之间的比例为oScrollbar.ratio。
不足之处：
- 没有提供动态显示和隐藏
- 提供hover的状态
/*!
improved by yini
* Tiny Scrollbar 1.66
* http://www.baijs.nl/tinyscrollbar/
*
* Copyright 2010, Maarten Baijs
* Dual licensed under the MIT or GPL Version 2 licenses.
* http://www.opensource.org/licenses/mit-license.php
* http://www.opensource.org/licenses/gpl-2.0.php
*
* Date: 13 / 11 / 2011
* Depends on library: jQuery
*
*/
(function($){
$.tiny = $.tiny || { };
$.tiny.scrollbar = {
options: {
axis: 'y', // vertical or horizontal scrollbar? ( x || y ).
wheel: 40, //how many pixels must the mouswheel scroll at a time.
scroll: true, //enable or disable the mousewheel;
size: 'auto', //set the size of the scrollbar to auto or a fixed number.
sizethumb: 'auto' //set the size of the thumb to auto or a fixed number.
}
};
$.fn.tinyscrollbar = function(options) {
var options = $.extend({}, $.tiny.scrollbar.options, options);
this.each(function(){ $(this).data('tsb', new Scrollbar($(this), options)); });
return this;
};
$.fn.tinyscrollbar_update = function(sScroll) { return $(this).data('tsb').update(sScroll); };
function Scrollbar(root, options){
var oSelf = this;
var oWrapper = root;
var oViewport = { obj: $('.viewport', root) };
var oContent = { obj: $('.overview', root) };
var oScrollbar = { obj: $('.scrollbar', root) };
var oTrack = { obj: $('.track', oScrollbar.obj) };
var oThumb = { obj: $('.thumb', oScrollbar.obj) };
var sAxis = options.axis == 'x', sDirection = sAxis ? 'left' : 'top', sSize = sAxis ? 'Width' : 'Height';
var iScroll, iMouse = {};//used to track when user starts to drag the thumb
function initialize() {
oSelf.update();
setEvents();
return oSelf;
}
this.update = function(sScroll){
oViewport[options.axis] = oViewport.obj[0]['offset'+ sSize];
oContent[options.axis] = oContent.obj[0]['scroll'+ sSize];
oContent.ratio = oViewport[options.axis] / oContent[options.axis];
oScrollbar.obj.toggleClass('disable', oContent.ratio >= 1);
oTrack[options.axis] = options.size == 'auto' ? oViewport[options.axis] : options.size;
oThumb[options.axis] = Math.min(oTrack[options.axis], Math.max(0, ( options.sizethumb == 'auto' ? (oTrack[options.axis] * oContent.ratio) : options.sizethumb )));
//ratio for content/track
oScrollbar.ratio = options.sizethumb == 'auto' ? (oContent[options.axis] / oTrack[options.axis]) : (oContent[options.axis] - oViewport[options.axis]) / (oTrack[options.axis] - oThumb[options.axis]);
iScroll = (sScroll == 'relative' && oContent.ratio <= 1) ? Math.min((oContent[options.axis] - oViewport[options.axis]), Math.max(0, iScroll)) : 0;
iScroll = (sScroll == 'bottom' && oContent.ratio <= 1) ? (oContent[options.axis] - oViewport[options.axis]) : isNaN(parseInt(sScroll)) ? iScroll : parseInt(sScroll);
setSize();
iMouse['start'] = oThumb.obj.offset()[sDirection];
var sCssSize = sSize.toLowerCase();
oScrollbar.obj.css(sCssSize, oTrack[options.axis]);
oTrack.obj.css(sCssSize, oTrack[options.axis]);
oThumb.obj.css(sCssSize, oThumb[options.axis]);
};
function setSize(){
oThumb.obj.css(sDirection, iScroll / oScrollbar.ratio);
oContent.obj.css(sDirection, -iScroll);
};
function setEvents(){
//drag and droop for thumb
oThumb.obj.bind('mousedown', start);
oThumb.obj[0].ontouchstart = function(oEvent){
oEvent.preventDefault();
oThumb.obj.unbind('mousedown');
start(oEvent.touches[0]);
return false;
};
//click for track
oTrack.obj.bind('mouseup', jump);
//scroll
if(options.scroll && this.addEventListener){
oWrapper[0].addEventListener('DOMMouseScroll', wheel, false);
oWrapper[0].addEventListener('mousewheel', wheel, false );
}
else if(options.scroll){oWrapper[0].onmousewheel = wheel;}
};
function start(oEvent){
console.info('start');
iMouse.start = sAxis ? oEvent.pageX : oEvent.pageY;
$(document).bind('mousemove', drag);
document.ontouchmove = function(oEvent){
$(document).unbind('mousemove');
drag(oEvent.touches[0]);
};
$(document).bind('mouseup', end);
oThumb.obj.bind('mouseup', end);
oThumb.obj[0].ontouchend = document.ontouchend = function(oEvent){
$(document).unbind('mouseup');
oThumb.obj.unbind('mouseup');
end(oEvent.touches[0]);
};
return false;
};
function drag(oEvent){
console.info('drag');
if(!(oContent.ratio >= 1)){
var newPos = Math.min((oTrack[options.axis] - oThumb[options.axis]), Math.max(0, (parseInt(oThumb.obj.css(sDirection)) + ((sAxis ? oEvent.pageX : oEvent.pageY) - iMouse.start))));
iScroll = newPos * oScrollbar.ratio;
setSize();
}
iMouse.start = sAxis ? oEvent.pageX : oEvent.pageY;
return false;
};
function end(oEvent){
console.info('end');
$(document).unbind('mousemove', drag);
document.ontouchmove = null;
$(document).unbind('mouseup', end);
oThumb.obj.unbind('mouseup', end);
oThumb.obj[0].ontouchend = document.ontouchend = null;
oEvent.stopPropagation();
return false;
};
function wheel(oEvent){
console.info('wheel');
if(!(oContent.ratio >= 1)){
var oEvent = oEvent || window.event;
var iDelta = oEvent.wheelDelta ? oEvent.wheelDelta/120 : -oEvent.detail/3;
iScroll -= iDelta * options.wheel;
iScroll = Math.min((oContent[options.axis] - oViewport[options.axis]), Math.max(0, iScroll));
setSize();
oEvent = $.event.fix(oEvent);
oEvent.preventDefault();
};
};
function jump(oEvent){
console.info('jump');
if(!(oContent.ratio >= 1)){
var newPos = Math.min((oTrack[options.axis] - oThumb[options.axis]), Math.max(0, ((sAxis ? oEvent.pageX : oEvent.pageY) - oTrack.obj.offset()[sDirection])));
iScroll = newPos * oScrollbar.ratio;
setSize();
}
return false;
};
return initialize();
};
})(jQuery);
更多scrollbar：http://www.net-kit.com/jquery-custom-scrollbar-plugins/
类似资料：