2010-07-12 54 views
-1

我有這樣的腳本,使內<div>添加鼠標滾輪滾動的能力

滾動條我想補充的功能,甚至使用「鼠標滾輪」

這裏滾動代碼:

var TINY={}; 

function T$(id){return document.getElementById(id)} 
function T$$$(){return document.all?1:0} 

TINY.scroller=function(){ 
return{ 
    init:function(a,c,b,s,d){ 
    a=T$(a); a.c=c; a.s=s; c=T$(c); b=T$(b); s=T$(s); a.n=d||0; 
    b.style.display='block'; a.style.overflow='hidden'; 
    var h=a.offsetHeight, t=c.offsetHeight; 
    if(t<h){ 
    b.style.display='none' 
    }else{ 
    a.m=h-t; a.d=t/h; s.style.height=(h*(h/t))+'px'; s.style.top=b.style.top=0; 
    s.onmousedown=function(event){TINY.scroller.st(event,a.id); return false}; 
    s.onselectstart=function(){return false} 
    } 
    a.l=b.offsetHeight-s.offsetHeight 
    }, 
    st:function(e,f){ 
    var a=T$(f), s=T$(a.s); a.bcs=TINY.cursor.top(e); a.bct=parseInt(s.style.top); 
    if(a.mv){this.sp(f)} 
    a.mv=function(event){TINY.scroller.mv(event,f)}; 
    a.sp=function(){TINY.scroller.sp(f)}; 
    if(T$$$()){ 
    document.attachEvent('onmousemove',a.mv); document.attachEvent('onmouseup',a.sp) 
    }else{ 
    document.addEventListener('mousemove',a.mv,1); document.addEventListener('mouseup',a.sp,1) 
    } 
    if(a.d){s.className+=' '+a.n} 
    }, 
    mv:function(e,f){ 
    var a=T$(f), m=TINY.cursor.top(e)-a.bcs+a.bct, s=T$(a.s), c=T$(a.c); 
    if(m>=0&&m<a.l){ 
    s.style.top=m+'px'; c.style.top=(m*-1*a.d)+'px' 
    }else if(m<0){ 
    s.style.top=0; c.style.top=0 
    }else if(m>a.l){ 
    s.style.top=a.l+'px'; c.style.top=a.m+'px' 
    } 
    }, 
    sp:function(f){ 
    var a=T$(f), s=T$(a.s); if(a.d){s.className=s.className.replace(' '+a.n,'')} 
    if(T$$$()){ 
    document.detachEvent('onmousemove',a.mv); document.detachEvent('onmouseup',a.sp) 
    }else{ 
    document.removeEventListener('mousemove',a.mv,1); document.removeEventListener('mouseup',a.sp,1) 
    } 
    a.mv=0; 
    } 
} 
}(); 

TINY.cursor=function(){ 
return{ 
    top:function(e){ 
    return T$$$()?window.event.clientY+document.documentElement.scrollTop+document.body.scrollTop:e.clientY+window.scrollY 
    } 
} 
}(); 

如何將此功能添加到當前代碼?

謝謝。

編輯:問題解決

+2

該演示在Firefox,Chrome或IE8中對我沒有做任何有趣的事情。點擊小箭頭不起作用。 – Pointy 2010-07-12 11:57:32

+0

但最糟糕的是,你的代碼是混亂的混亂。你真的認爲有人會花一整天的時間去搞清楚'mv()'中的'a.m'意味着什麼? – galambalazs 2010-07-12 12:03:30

+0

@Pointy:箭頭只是一個設計元素。你需要點擊它並拉上/下。 – MANnDAaR 2010-07-12 12:05:28

回答

0

使用此代碼:

http://adomas.org/javascript-mouse-wheel/

TINY.scroller=function(){ 

return{ 
    init:function(a,c,b,s,d){ 
    a=T$(a); a.c=c; a.s=s; c=T$(c); b=T$(b); s=T$(s); a.n=d||0; 
    b.style.display='block'; a.style.overflow='hidden'; 
    var h=a.offsetHeight, t=c.offsetHeight; 
    if(t<h){ 
    b.style.display='none' 
    }else{ 
    a.m=h-t; a.d=t/h; s.style.height=(h*(h/t))+'px'; s.style.top=b.style.top=0; 
    s.onmousedown=function(event){TINY.scroller.st(event,a.id); return false}; 
    s.onselectstart=function(){return false} 
    } 


    if (window.addEventListener) a.addEventListener('DOMMouseScroll', function(event){TINY.scroller.wheel(event,a.id); return false}, false); 
    /** IE/Opera. */ 
    a.onmousewheel = a.onmousewheel = function(event){TINY.scroller.wheel(event,a.id); return false}; 

    a.l=b.offsetHeight-s.offsetHeight 
    }, 
/** Event handler for mouse wheel event. 
*/ 
    wheel: function (event,f){ 

     var delta = 0; 
     if (!event) /* For IE. */ 
       event = window.event; 
     if (event.wheelDelta) { /* IE/Opera. */ 
       delta = event.wheelDelta/120; 
     } else if (event.detail) { /** Mozilla case. */ 
       /** In Mozilla, sign of delta is different than in IE. 
       * Also, delta is multiple of 3. 
       */ 
       delta = -event.detail/3; 
     } 
     /** If delta is nonzero, handle it. 
     * Basically, delta is now positive if wheel was scrolled up, 
     * and negative, if wheel was scrolled down. 
     */ 
     if (delta) { 
      console.log(delta);    
      var a=T$(f), s=T$(a.s), c=T$(a.c); a.bcs=TINY.cursor.top(event); a.bct=parseInt(s.style.top); 
      var m = a.bct - delta; 
      if(m>=0&&m<a.l){ 
       s.style.top=m+'px'; c.style.top=(m*-1*a.d)+'px' 
      }else if(m<0){ 
       s.style.top=0; c.style.top=0 
      }else if(m>a.l){ 
       s.style.top=a.l+'px'; c.style.top=a.m+'px' 
      } 
     } 
     /** Prevent default actions caused by mouse wheel. 
     * That might be ugly, but we handle scrolls somehow 
     * anyway, so don't bother here.. 
     */ 
     if (event.preventDefault) 
       event.preventDefault(); 
    event.returnValue = false; 
    }, 
    st:function(e,f){ 
    var a=T$(f), s=T$(a.s), c=T$(a.c); a.bcs=TINY.cursor.top(e); a.bct=parseInt(s.style.top); 
    if(a.mv){this.sp(f)} 
    a.mv=function(event){TINY.scroller.mv(event,f)}; 
    a.sp=function(){TINY.scroller.sp(f)}; 
    if(T$$$()){ 
    document.attachEvent('onmousemove',a.mv); document.attachEvent('onmouseup',a.sp) 
    }else{ 
    document.addEventListener('mousemove',a.mv,1); document.addEventListener('mouseup',a.sp,1) 
    } 
    if(a.d){s.className+=' '+a.n} 
    }, 
    mv:function(e,f){ 
    var a=T$(f), m=TINY.cursor.top(e)-a.bcs+a.bct, s=T$(a.s), c=T$(a.c); 
    if(m>=0&&m<a.l){ 
    s.style.top=m+'px'; c.style.top=(m*-1*a.d)+'px' 
    }else if(m<0){ 
    s.style.top=0; c.style.top=0 
    }else if(m>a.l){ 
    s.style.top=a.l+'px'; c.style.top=a.m+'px' 
    } 
    }, 
    sp:function(f){ 
    var a=T$(f), s=T$(a.s); if(a.d){s.className=s.className.replace(' '+a.n,'')} 
    if(T$$$()){ 
    document.detachEvent('onmousemove',a.mv); document.detachEvent('onmouseup',a.sp) 
    }else{ 
    document.removeEventListener('mousemove',a.mv,1); document.removeEventListener('mouseup',a.sp,1) 
    } 
    a.mv=0; 
    } 
} 
}(); 

或者,只是創建左側隱藏滾動條時,滾動條下!