Scroller - globules-io/OGX.JS GitHub Wiki

OGX.Scroller is basically a vertical scroll pane with a slider/button that works both on iOS and Android webviews.

Instantiate

 let config = {
      el:_SELECTOR_,
      auto_scroll:true|false  //defaults to true, scrolls down when new content is added
      zindex:_INT_, //defaults to 9999
      observe:_BOOL_, //defaults to true,
      trigger:_BOOL_ //defaults to true
 };
 let scroller = new OGX.Scroller(config);

OGX.JS already handles instantiating scrollers in views, windows, popups and most of the components that would require a scroll. If for some reason you still need to use a scroller for a part of a view, keep reading. Otherwise, use the scroll flag of the view/component/etc..

Now if you decide to use a scroller, in many cases, you'd want to wait for the component to be ready before you can add content to it. This component as an embedded process that fires an event when it is ready to run.

$('#myDiv').on(OGX.Scroller.READY, function(__e, __data){
    $('#myDiv').off(OGX.Scroller.READY);  //Turn it off right away
    //now you can add content to scroller.getInner() which is the inner HTML element of the scrollpane
    let inner = scroller.getInner();
    $(inner).append(_SOME_HTML_CONTENT);
});

Important note, the height of the target container must be set in pixels or percent.

Get/Set

Retrieve the HTML elements representing the content (inner) and the scroller object (outer).

 scroller.getInner();
 scroller.getOuter();

The inner HTML element is the one to use to add content to your scroller. The outer is the HTML element the component was instantiated in, which is also the mask (visible zone). You must set an height to you div to create an "overflow" for the scroller to work.

Updating/Redrawing

In order to update/force the redraw of the scroller (for instance, once its content has been updated) you can use the following:

 scroller.update();

By default, via the observe config parameter, the scroller will watch for added or removed elements in its inner container and will redraw the scroll bar accordingly. There is no need to use the update method if observe is set to true.

Muting

If trigger is set to true in the config, you can temporarily mute the component (no triggering of events) without changing config.trigger to false, by calling the mute method. Then restore it by using the vocal method

 scroller.mute();
 scroller.vocal();

Overflow 1.25.0+

You can also control the overflow of the scroller. Turning off the overflow disable the Scroller and display the entire content.

 scroller.overflow(false);

Percent 1.26.0+

To retrieve the current scroll position in percent

 scroller.percent();

Events

 OGX.Scroller.READY |
 OGX.Scroller.TOP  |
 OGX.Scroller.BOTTOM |
 OGX.Scroller.SCROLL |
 OGX.Scroller.START | 
 OGX.Scroller.END

Scrolling

Scroll to the top/bottom

 scroller.top();
 scroller.bottom();
 scroller.scroll(_INT_); //ie scroller.scroll(150);