自定义滚动条

标签：style   io   os   ar   div   sp   cti   on   c   

<div class="wrap" id="wrap">

<div id="listbox">

<img src="./img/" alt="" />

<div id="para">

<p>content</p>

<p>content</p>

<p>content</p>

<p>content</p>

<p>content</p>

<p>content</p>

<p>content</p>

<p>content</p><p>content</p>

<p>content</p>

<p>content</p>

<p>content</p><p>content</p>

<p>content</p>

<p>content</p>

<p>content</p><p>content</p>

<p>content</p>

<p>content</p>

<p>content</p><p>content</p>

<p>content</p>

<p>content</p>

<p>content</p><p>content</p>

<p>content</p>

<p>content</p>

<p>content</p><p>content</p>

<p>content</p>

<p>content</p>

<p>end</p>

</div>

</div>

<div id="scrollbox">

<div id="scrollbar"></div>

</div>

</div>

css：

#wrap{ position:relative; width:100%; height:500px; overflow:hidden;   }

#wrap #listbox{ float:left; position:absolute; top:0; left:0; width:470px;  background:#f2f2f2; }

#wrap #scrollbox{ float:right; position:relative; width:10px; height:500px;  background:#333;}

#wrap #scrollbar{ position:absolute; left:0; top:0; width:10px; height:3px; margin:0 auto; background:#f60; }

js：

var listWrap = document.getElementById(‘wrap‘);

var listBox  = document.getElementById(‘listbox‘);

var scrollBox = document.getElementById(‘scrollbox‘);

var scrollBar = document.getElementById(‘scrollbar‘);

var scale = 0, height = 0, maxTop = 0, listMaxTop = 0, t = 0;

scale = listWrap.clientHeight / listBox.scrollHeight;

if(scale>1)scale = 1;

height =  scale * scrollBox.scrollHeight;

maxTop = scrollBox.scrollHeight - height;

listMaxTop = listWrap.clientHeight - listBox.scrollHeight;

if( scale == 1 )scrollBox.style.display = ‘none‘;

scrollBar.style.height = height + ‘px‘;

scrollBar.onmousedown = function(ev){

var ev = ev || event;

var disY = ev.clientY - this.offsetTop;

document.onmousemove = function(ev){

var ev = ev || event;

t = ev.clientY - disY;

fnScroll();

};

document.onmouseup = function(){

document.onmouseup = document.onmousemove = null;

};

return false;

};

listWrap.onmousewheel = mouseScroll;

if(listWrap.addEventListener){

listWrap.addEventListener(‘DOMMouseScroll‘,mouseScroll,false);

}

function mouseScroll(ev){

var ev = ev || event;

var fx = ev.wheelDelta || ev.detail;

var bDown = true;

if( ev.detail ){

bDown = fx > 0 ? true : false;

}else{

bDown = fx > 0 ? false : true;

}

if( bDown ){

t += 10;

}else{

t -= 10;

}

fnScroll();

if( ev.preventDefault ){

ev.preventDefault();

}

return false;

}

function fnScroll(){

if( t < 0 ) t = 0;

if(t > maxTop) t = maxTop;

var scale = t / maxTop;

var listTop = scale * listMaxTop;

scrollBar.style.top = t + ‘px‘;

listBox.style.top = listTop + ‘px‘;

};

自定义滚动条

标签：style   io   os   ar   div   sp   cti   on   c   

原文地址：http://my.oschina.net/glelaine/blog/313131