vancura/variscroll-howto.md

## variscroll-howto.md

      
    Raw
  

              variscroll-howto.md
            
          
    Just for your information: our new VariScroll engine runs in two modes: automatic or manual:

automatic mode: you choose an element to apply VariScroll to, and this element becomes variscrolled. VariScroll itself wraps the element into another div. So if you have something like this: div.myscroll, it becomes: div.variscroll-container > div.myscroll. The old div.myscroll is wrapped into newly created div.variscroll-container. This is needed so the engine works. FYI everything can be undone using the destroy() method.
manual mode: you need to create the wrapping divs prior to calling VariScroll, and you send these elements selectors to the engine. This had to be done so the SAY ads could be loaded (they're nasty).
Let me show on the Phoenix demo I am working on:

<div id="variscroll">
    <div id="variscroll-roller">
        <div class="unit first">Advertisement</div>
        <div class="unit">Advertisement</div>
        <div class="unit">Advertisement</div>
        <div class="unit last">Advertisement</div>
    </div>
</div>
The initialization is done in JS via:
$("#variscroll-roller").variScroll({
    ratio: 0.2,
    isRollbackEnabled: true,
    isManual: true,
    isOuterContainerHeightChangeEnabled: false,
    outerContainer: $("#variscroll")
});
Let me explain the options:

ratio: speed of the VariScroll. If it's lower than 1, it's slower, if it's larger, it's faster,
isRollbackEnabled (true by default): if true: when the scroller is on the bottom end, you can scroll up right away, no need to wait until the scroll position kicks in,
isManual (false by default): see above,
isOuterContainerHeightChangeEnabled (true by default): if true, page height could be manually adjusted, so when VariScroll is really long, it sets up the container height and does not overflow,
outerContainer (null by default): hre you specify the outer container of the VariScroll, in the above example div#variscroll.

There's also a few other options you can use:

logger (null by default): you can specify your own logging function, VariScroll could be verbose; try console.log (without (), it's not a call, but reference to a function)
headerHeight (0 by default): here you can specify the offset from top, before the VariScrolling kicks in; value in px
footerElement (null by default): footer element to slide from bottom

FYI there's no special styling needed, everything is handled by VariScroll itself.