usage:
$('.scrollContent').setScrollNoArrow( {img:'_common/img/scrollbar/scroll_bar.jpg',width:8},
{img:'_common/img/scrollbar/scroll_btn.jpg',height:16}
);
<script>
/*
* Adding by Jerome Xie
* Supporting DOCTYPE Declaration
*/
jQuery.fn.setScrollNoArrow = function(_scroll, _scroll_bar){
this.each(function(){
var _bar_margin = 0;
var _bar_margin_str = '0px';
//create scroll dom
var _scroll_control = jQuery('<div class="scroll_zone">').width(_scroll.width).css({'position':'absolute','float':'none','margin':'0px','padding':'0px'}).css('background','url('+_scroll.img+')');
var _scroll_control_bar = jQuery('<img class="scroll_bar">').attr('src',_scroll_bar.img).width(_scroll.width).css({'z-index':'1500','position':'absolute','float':'none','margin':'0px','padding':'0px','height':_scroll_bar.height+'px'}).css('top',_bar_margin_str);
_scroll_control.append(_scroll_control_bar);
var _oheight = jQuery(this).height();
var _owidth = jQuery(this).width();
var _ocontent = jQuery(this).html();
if(jQuery(this).attr('scrollHeight')<=_oheight) return;
var _content_zone = jQuery('<div>').html(_ocontent).css({ 'position':'relative','width':(_owidth-10)+'px','height':'auto','overflow':'visible','float':'none','left':'0px','top':'0px','margin':'0px','padding':'0px','white-space': 'normal'});
jQuery(this).css({'overflow':'hidden'});
jQuery(this).empty().append(_content_zone).css({'position':'relative'}).append(_scroll_control.css({'left':(_owidth-_scroll.width)+'px','top':'0px','height':_oheight+'px','margin':'0px','padding':'0px'}));
//register drag event
jQuery(this).find('.scroll_bar')
.mousedown(
function(){
jQuery(document).mousemove(
function(e){
var _content = _content_zone.get(0);
var lastProgress = (_scroll_control_bar.attr('progress') != undefined)? _scroll_control_bar.attr('progress') : 0 ;
_scroll_control_bar.attr('progress',e.pageY);
var _scroll_control_bar_position = _scroll_control_bar.position();
var nowProgress = _scroll_control_bar_position.top;
nowProgress += e.pageY-lastProgress;
var _content_top = ((_content.offsetHeight - _oheight)/(_oheight -_scroll_bar.height))*nowProgress
_content.style.top= -_content_top + "px";
if(nowProgress<(_bar_margin) || nowProgress > (_oheight-(_scroll_bar.height+_bar_margin))){
return false;
}
try{_scroll_control_bar.css('top',nowProgress+'px');}catch(e){}
return false;
}
);
return false;
}
)
.mouseout(
function(){
jQuery(document).mouseup(
function(){
jQuery(document).unbind('mousemove');
}
)
}
)
});
}
</script>
更多的请查考(感谢:cuikai):
http://www.aa25.cn/css_example/794.shtml
$('.scrollContent').setScrollNoArrow( {img:'_common/img/scrollbar/scroll_bar.jpg',width:8},
{img:'_common/img/scrollbar/scroll_btn.jpg',height:16}
);
<script>
/*
* Adding by Jerome Xie
* Supporting DOCTYPE Declaration
*/
jQuery.fn.setScrollNoArrow = function(_scroll, _scroll_bar){
this.each(function(){
var _bar_margin = 0;
var _bar_margin_str = '0px';
//create scroll dom
var _scroll_control = jQuery('<div class="scroll_zone">').width(_scroll.width).css({'position':'absolute','float':'none','margin':'0px','padding':'0px'}).css('background','url('+_scroll.img+')');
var _scroll_control_bar = jQuery('<img class="scroll_bar">').attr('src',_scroll_bar.img).width(_scroll.width).css({'z-index':'1500','position':'absolute','float':'none','margin':'0px','padding':'0px','height':_scroll_bar.height+'px'}).css('top',_bar_margin_str);
_scroll_control.append(_scroll_control_bar);
var _oheight = jQuery(this).height();
var _owidth = jQuery(this).width();
var _ocontent = jQuery(this).html();
if(jQuery(this).attr('scrollHeight')<=_oheight) return;
var _content_zone = jQuery('<div>').html(_ocontent).css({ 'position':'relative','width':(_owidth-10)+'px','height':'auto','overflow':'visible','float':'none','left':'0px','top':'0px','margin':'0px','padding':'0px','white-space': 'normal'});
jQuery(this).css({'overflow':'hidden'});
jQuery(this).empty().append(_content_zone).css({'position':'relative'}).append(_scroll_control.css({'left':(_owidth-_scroll.width)+'px','top':'0px','height':_oheight+'px','margin':'0px','padding':'0px'}));
//register drag event
jQuery(this).find('.scroll_bar')
.mousedown(
function(){
jQuery(document).mousemove(
function(e){
var _content = _content_zone.get(0);
var lastProgress = (_scroll_control_bar.attr('progress') != undefined)? _scroll_control_bar.attr('progress') : 0 ;
_scroll_control_bar.attr('progress',e.pageY);
var _scroll_control_bar_position = _scroll_control_bar.position();
var nowProgress = _scroll_control_bar_position.top;
nowProgress += e.pageY-lastProgress;
var _content_top = ((_content.offsetHeight - _oheight)/(_oheight -_scroll_bar.height))*nowProgress
_content.style.top= -_content_top + "px";
if(nowProgress<(_bar_margin) || nowProgress > (_oheight-(_scroll_bar.height+_bar_margin))){
return false;
}
try{_scroll_control_bar.css('top',nowProgress+'px');}catch(e){}
return false;
}
);
return false;
}
)
.mouseout(
function(){
jQuery(document).mouseup(
function(){
jQuery(document).unbind('mousemove');
}
)
}
)
});
}
</script>
更多的请查考(感谢:cuikai):
http://www.aa25.cn/css_example/794.shtml