[JS] Scrollbar als slider gebruiken

[Bozozo]

Ik zit te spelen met CSS en Javascript (studie-ontwijkend gedrag) en ik ben bezig om een slider te maken met een standaard scrollbar. Ik heb al vaker sliders gemaakt met divjes, maar het leek me leuk om het met een echte scrollbar te doen.

Dat gaat allemaal heel goed maar nou wil ik eigenlijk de pijltjes aan weerszijden van de scrollbar kunnen gebruiken om de scrollbar 1 stap op te schuiven. Als er bijvoorbeeld maar twee mogelijke waarden zijn voor de scrollbar (zeg 0 en 1) dan moet de scrollbar dus helemaal naar rechts schuiven bij een klikje op het pijltje aan de rechterzijde scrollbar.

Samengevat wil ik achterhalen of een onScroll event is veroorzaakt door het slepen met de scrollbalk, of door een klik op een van de pijltjes naast de scrollbalk.

Volgens mij gaat dit niet lukken maar misschien heeft iemand een lumineus idee

edit: volgens mij moet het te doen zijn met een combinatie van mousedown en mouseup op de body en onscroll, misschien nog gecombineerd met een timer.
edit edit: IE registreert geen mouseUp op een scrollbar (wel mouseDown gek genoeg).

[ Voor 12% gewijzigd door Bozozo op 15-01-2009 17:45 ]

[Bozozo]

Ik heb het opgelost. In het onwaarschijnlijke geval dat iemand anders met hetzelfde probleem komt te zitten:

JavaScript:

/**
  * function addScrollbarEventHandlers
  * 
  * Allows you to handle four types of scrollbar events seperately for the scrollbar of element sb:
  *   - clickHandler is called when the user clicks the scrollbar or the arrows 
   *   - dragHandler is called when the user drags the scrollbar handle
   *   - wheelHandler is called when the user operates the mouse wheel
   *   - initHandler is called when the browser scrolls to a certain point upon page load
   *
   * Notes:
   *   - An addEvent function is assumed to be available  
   *   - The onScroll event is passed on to all three handlers as a variable
   *   - The 'this' keyword refers to the sb element in the handler functions
   *   - this.scrollAnchorTop/Left contains the scrollTop/Left position, as recorded before the last scroll event
   *   - arrow key scrolling is not handled well. It is processed as a scroll of the last mouse type (click/wheel/drag)
   *     Add your own keydown handler if you need this behavior to be handled better.
   *
   *  Version 0.3
   *
   *  Created by Arno van den Brink. Use freely as you please.
   */

function addScrollbarEventHandlers(sb,clickHandler,dragHandler,wheelHandler,initHandler) {
    sb.clickHandler = clickHandler;
    sb.dragHandler = dragHandler;
    sb.wheelHandler = wheelHandler;
    sb.initHandler = initHandler;
    sb.scrollMode = "INIT";
    sb.scrollTimer = null;
    sb.firstEventTimer = null;
    addEvent(sb,'mousedown',function(e){
        sb.scrollAnchorTop = sb.scrollTop;
        sb.scrollAnchorLeft = sb.scrollLeft;                    
        sb.scrollMode = "CLICK";
        sb.scrollTimer = window.setTimeout(function(){
            sb.scrollMode = "DRAG";
        },1);
    });
    var mouseWheelEvent = "mousewheel";
    if (window.addEventListener) mouseWheelEvent = "DOMMouseScroll";
    addEvent(sb,mouseWheelEvent,function(e){
        sb.scrollAnchorTop = sb.scrollTop;
        sb.scrollAnchorLeft = sb.scrollLeft;
        sb.scrollMode = "WHEEL";
    });
    addEvent(sb,'scroll',function(e){
        window.clearTimeout(sb.scrollTimer);
        switch(sb.scrollMode) {
            case "CLICK":
                if (sb.firstEventTimer==null) sb.firstEventTimer = window.setTimeout(function(){                                
                    sb.clickHandler(e);
                    sb.firstEventTimer = null;
                    sb.scrollAnchorTop = sb.scrollTop;
                    sb.scrollAnchorLeft = sb.scrollLeft;
                },1);
                break;
            case "DRAG":
                sb.dragHandler(e);
                break;
            case "WHEEL":
                if (sb.firstEventTimer==null) sb.firstEventTimer = window.setTimeout(function(){                            
                    sb.wheelHandler(e);
                    sb.firstEventTimer = null;
                },1);
                break;
            default:
                sb.initHandler(e);
                break;
        }
    });
}

Getest in Firefox en IE7. De enige bug is dat Firefox op willekeurige momenten soms een klik voor een drag aanziet, maar ik kan dat niet reproduceerbaar veroorzaken. Vermoedelijk iets met de timers. Ik kan even geen voorbeeldje online zetten, maar desgevraagd zal ik dat maandag even doen.

Suggesties voor verbetering welkom!

edit: support voor verticaal scrollen met muiswieltje toegevoegd.

[ Voor 41% gewijzigd door Bozozo op 18-01-2009 17:49 ]