JavaScripting

The definitive source of the best
JavaScript libraries, frameworks, and plugins.


  • ×

    Scrob Master

    Master your scroll events.
    Filed under  › 

    • 🔾6%Overall
    • 164
    • 112.8 days
    • 🕩5
    • 👥2

    ScrobMaster

    Master your scroll events based on the elements you are affecting.
    ScrobMaster allows you to attach events to scroll points based off registered DOM elements.

    Overview:

    ScrobMaster works with elements that have been registered to create "Scrobjects". Each Scrobject has two adjustable zones that each have three attachable events. Events are executed when the page's settable trigger point enters, exits or scrolls in one of the scrobjects zones.

        events: bufferEnter, bufferStep, bufferExit, enter, step, exit
    
        Buffer Zone: the space between bufferTop and bufferBottom
        live Zone: the space between top and bottom
    
                 Window
        ------------------------
        |  ....................|....... bufferTop
        |  .                   |
        |  .                   |        Buffer Zone
        |  .                   |
        |  ------------------..|....... top
        |  |     Element    |  |
        |  |                |  |        live Zone
        |  |                |  |
        |  ------------------..|....... bottom
        |  .                   |
        |  ....................|....... bufferBottom
        ------------------------
    
    

    Basic Use:

            //Basic Example: 
            // Register Element with ID of bob2 as a scrobject
            scrob.register('bob2');
    
            //set the bufferEnter event to trigger 100px above the element
            scrob.bob2.set("bufferTop", -100);
    
            // Set the enter event to change the background color
            // based on the direction of the scroll when event it triggered.
            scrob.bob2.on('enter', function(scrollState){
                this.style.backgroundColor = (scrollState.direction == "up")? "red":"blue";
            });
    
            // Set exit event to revert the background color to white.
            scrob.bob2.on('exit', function(scrollState){
                this.style.backgroundColor = "white";
            });
    
    For ease of use ScrobMaster methods can be chained and most accept objects to attach multiple events and set multiple properties at once. So the above could be reduced to:
            scrob.register('bob2').set({
                'bufferTop': -100,
                'enter': function(scrollState){this.style.backgroundColor = (scrollState.direction == "up")? "red":"blue";},
                'exit': function(scrollState){this.style.backgroundColor = "white";}
            });
    
    Please note: In the examples above to raise the bufferEnter's trigger point a negative value was used. This is because ScrobMaster positioning is based off scrollTop, Larger numbers are further down on the page and the opposite for smaller. The top of the page being located at 0.

    ScrobMaster API

    Register
        scrob.register("elementID");
        scrob.register("#elementID");
        scrob.register(".className");
    
    Registers and returns a new Scrobject on the scrobMaster. Registered elements are accessible off the scrobMaster via the ID passed into the register method. Chain-able.
        //Register example:
        scrob.register('bob2');
        //returns scrob.bob2
    
        //access a scrobject:
        scrob.bob2 || scrob['bob2']
    
    

    setTriggerPos

    scrob.setTriggerPos(int);
    Sets the windows trigger position. Defaults to 0 or the top of the window. Chain-able Returns ScrobMaster or Scrobject it was called on.
    getScrollTop
    scrob.getScrollTop()
    Not Chain-able. Returns the current scroll position of the window.

    ScrobJect API

    Methods outlined below are called off a registered scrobject, eg. scrob.bob2.methodCall();
    set
        scrob.bob2.set(property[, val])
        scrob.bob2.set({"property":val });
    

    set properties and or events for your scrobject.
    accepts object with prop:val pairs
    Chain-able, returns scrobject called on.

    Settable properties:

    • elm : DOM element - element events will affect.
    • top: integer - top trigger point relative to elm
    • bottom: integer - bottom trigger point relative to elm
    • bufferTop: integer - top trigger of buffer point relative to elm
    • bufferBottom: integer - bottom trigger of buffer point relative to elm

    Note - if top is set to a value less than bufferTop; bufferTop will also be set to the given value. The reverse is true for bottom and bufferBottom

    Attachable methods:

    • bufferEnter - triggered when buffer zone is entered from top or bottom
    • bufferStep - triggered on scroll in buffer zone
    • bufferExit - triggered when buffer zone is exited from top or bottom
    • enter - triggered when live zone is entered from top or bottom
    • step - Triggered on scroll in live zone
    • exit - triggered when live zone is exited from top or bottom
    Event method functions accept the current ScobMaster scrollState, described below, as their only parameter
    on
        scrob.bob2.on(method[, val])
        scrob.bob2.on({"method":val})
    
    Syntactical alias for set - Used to assign scroll events
    accepts object with prop:val pairs
    Chain-able, returns scrobject called on.
    addon
        scrob.bob2.addon(method[, val])
        scrob.bob2.addon({"method":val})
    
    Similar to the "on" method, used to assign scroll events in addition to previously defined handles rather than replace them.
    accepts objects with prop:val pairs
    Chain-able, returns scrobject called on.
    example
        scrob.register('bob2');
        scrob.on('enter', function(scrollState){console.log('one')});
        scrob.addon('enter', function(scrollState){console.log('two')});
        //Will log both 'one' and 'two' when enter is triggered
    
    elm
    scrob.bob2.elm
    The element that the scrobject affects
    style
    scrob.bob2.style
    Shorthand to the affected elements style attribute.

    Inside the event handler function

    Here is some information about the handles you pass when setting events:
    ScrobMaster scrollState argument
    scrollState is updated on scroll and passed in to each event method defined when trigged. Property
    • scrollState.direction = direction of scroll.
    • scrollState.scrollTop = current scrollTop of window
    • scrollState.lastScrollTop = previous scrollTop of window.

    this
    Inside of a handler function "this" refers to the scrobject you are affecting.

        //an example:

    scrob.bob2.set({
        'enter': function(state){
            this.on('exit', function(state){this.style.border = "none"}),
            this.style.border = "solid 2px red";
        }
    });
    


    Working with Classes and ScrobMaster

    ScrobMaster supports registering a group of elements at the same time through the use of a CSS class selector.
    Registering with a class selector will return a scrobarray object; The same way a scrobject would be returned.
    The scrobarray object has the same methods and properties as the basic scrobject. The difference is, rather than applying them to a single element, a scrobarray houses an array of nodes. (scrob.scrobarray.nodes) These nodes are essentially scrobject that prototype thier parental scrobarray.

    Each node has the ability to support it's own set of handles that will overide the scrobarray handles.
    Scrobarray nodes are only available to edit after the DOM has loaded.

    example:

    
    
    scrob.register('.classBob');
    
    scrob.classBob.set({
        "enter": function(state){this.style.backgroundColor = "blue"}, 
        "exit": function(state){this.style.backgroundColor = "white"}, 
        "top": -100 
    });
    
    window.onload = function(){
        scrob.classBob.nodes[1].set("enter", funciton(state){this.style.backgroundColor = "green"});
    }
    

    What we did:

    • register the className, which will construct and return a new scrobarray.
    • set the enter, exit events and trigger top for every node on the scrobarray, which will, again, return the scrobarray
      • turn blue when element is entered
      • turn white when element is exited
      • set trigger point to be 100px above each element
        • change the enter event for the second node after it is available for editing (after the DOM loads)
          • This will overwrite the previously set enter event for THIS NODE ONLY.
          • All others will function as previously defined
          • returns the ScrobArrayNode that was called upon.
    Show All