Aria Templates Forums
iScroll implementation using Aria Templates - Printable Version

+- Aria Templates Forums (http://ariatemplates.com/forum)
+-- Forum: Public forums (/forumdisplay.php?fid=3)
+--- Forum: Specifications (/forumdisplay.php?fid=13)
+--- Thread: iScroll implementation using Aria Templates (/showthread.php?tid=29)



iScroll implementation using Aria Templates - renjurichard - 18 June 2013 07:55

The main use case for 'iScroll' is arised from the inability to scroll content inside a fixed width/height element when used with mobile webkit (on iPhone, iPad, Android). This situation prevents any web-app to have a position:absolute header and/or footer and a scrolling central area for contents.

The entire HTML document is scrolled regardless of any CSS you might have in place to achieve otherwise. Because many native mobile applications are designed with a fixed navigation bar at the top of the screen and a fixed toolbar or tab bar at the bottom of the screen, this lack of fixed content support in the WebKit browsers is really quite a problem.

Getting iScroll Into Your Project

Head on over to the iScroll homepage and download the source. Download iScroll 4 and Unzip the file download and grab the iscroll-lite.js file. [As we are using only the basic scrolling functionality, this is all we are going to need]. Drop the file into your desired directory. Then you can use the following way to invoke the iScroll class in your html file.

<script type="text/javascript">
var theScroll;
function scroll() {
    theScroll = new iScroll('wrapper');
}
document.addEventListener('DOMContentLoaded', scroll, false);
</script>

When you call .iscroll() the library will find the parent element and make the content scrollable. This method will also return an instance of the iScroll class. If the method is called again it will refresh the content. This is convenient in case you modify the content dynamically (iScroll allows to detech DOM changes automatically).

The library dispatches an event name onScrollEnd when the scroll action is completed. In touch screen devices this library adds momentum. This means that the content will continue moving for a short time after the touchend event.

Implementation using Aria Templates

The controller js handles code for iScroll implementation. Sample code is shown below:

Aria.tplScriptDefinition({
    $classpath: 'scrollTemplate.SampleScript',
    $dependencies: ['aria.utils.Dom'],
    $constructor: function () {
        this.myScroll = null
    },

    $destructor: function () {
        null != this.myScroll && this.myScroll.destroy(), this.myScroll = null
    },

    $prototype: {
        $viewReady: function () {
            var t = this;
            var D = aria.utils.Dom;
            setTimeout(function () {
                t.myScroll = new iScroll(D.getElementById('wrapper'))

            }, 1000)
        }
    }
});

The tpl contains the following lines
<div id="wrapper">
    <div id="scroll-content">


Another sample AT implementation is shown below:

Aria.tplScriptDefinition({
    $classpath: "templates.pages.uiiscroll.CarouselScript",
    $constructor: function () {
        this.myScroll = null
    },
    $destructor: function () {
        null != this.myScroll && this.myScroll.destroy(), this.myScroll = null
    },
    $prototype: {
        $viewReady: function () {
            var t = this;
            setTimeout(function () {
                t.myScroll = new iScroll(t.$getId("wrapper"), {
                    snap: "li",
                    momentum: !1,
                    hScrollbar: !0,
                    vScrollbar: !1,
                    vScroll: !1,
                    snapSpacing: 0
                })
            }, 100), setTimeout(function () {
                t.myScroll = new iScroll(t.$getId("wrappervert"), {
                    snap: "li",
                    momentum: !1,
                    vScrollbar: !0,
                    hScrollbar: !1,
                    hScroll: !1,
                    snapSpacing: 0
                })
            }, 100)
        }
    }
});

When we create a new iScroll object, we have the option to pass in a second parameter as a JavaScript configuration object. The configuration options available include:

hScroll
vScroll
hScrollbar
vScrollbar
fixedScrollbar
fadeScrollbar
hideScrollbar
bounce
momentum
lockDirection


function scroll() {
    newScroll = new iScroll('wrapper', { hScrollbar : false, vScrollbar : false });
}

hScroll and vScroll control the horizontal and vertical scrolling (if you hadn’t guessed) and by setting either one to false, you can disable them
altogether. By default, these are both set to true, so if your content exceeds the wrapper, the user will have the ability to scroll to it.
hScrollbar and vScrollbar these are the options to show and hide the black scrollbar that fades-in and fades-out when scrolling.


The fixedScrollbar option is the control for how the scrollbar acts when it reaches the end of your scrollable container. By default it is set to false so that when it reaches the end, it shrinks down. When set to true, it remains a fixed height.

fadeScrollbar is set to true by default, but if you would prefer to have the scrollbar just dissapear rather than fade, set this to false.
hideScrollbar is set to true by default, but if you want the scrollbar to remain on the page, set this to false. The scrollbar will now not fade out when the user stops scrolling.

bounce is to set the ‘elastic banding’ when the user scrolls beyond the content. By default this is set to true. Personally I have found that when using iScroll within a big application, setting this to false has saved a lot of loading time.

momentum controls the inertia of the scrolling. By default it is set to true, but if you want a more controlled scrolling area, set this to false. This is another one of those options that you might want to turn off in big applications as it seems to eat up resources.

lockDirection locks down the scrolling to one axis only. So you can either scroll up and down or left and right at any one time. This is set to true by default, but if you want to allow the user to scroll in either direction at anytime, set it to false.

iScroll lets you zoom in and out. By setting the zoom option to true the scroller reacts to pinch/zoom gestures

newScroll = new iScroll(currentPageId, {snap: true,momentum: false,hScrollbar: false,vScrollbar: false });

The snap feature locks the scroller to predefined positions. This can be used to create fancy carousels.

You can now customize the scrollbars appearance with a bunch of CSS. To apply a class to the scrollbars you just need to pass the scrollbarClass option:
myScroll = new iScroll('wrapper', { scrollbarClass: 'myScrollbar' });.


Mastering the Refresh method:

Every time you change elements height/width or you modify the html structure in any way (eg: appendChild or innerHTML) the browser rendering happening. Once the browser applied the changes we can access the new DOM (and properties) from javascript again. we should read the DOM instantly so that javascript gets updated parameters. This is done using Refresh mechanism of iScroll. See the following code:
        var t = this;
            var D = aria.utils.Dom;
          
            setTimeout(function () {
                            t.myScroll = new iScroll(D.getElementById('wrapper'));
                t.myScroll.refresh();
            }, 1000);
Zero time out is given as the browser the time to refresh itself and the new element dimensions are correctly taken.
So if unsure call the refresh inside a timeout.

Public Method:

iScroll has some public methods you can access any time to interact with the scroller. The most important of all is refresh, it must be called each time the content inside the scroller changes.
Public methods are accessed thank to the global variable used to instantiate the iScroll. In the examples I used myScroll, so you can access all the methods
with: myScroll.name_of_the_function(parameters).

Custom Scrollbars:
You can now customize the scrollbars appearance with a bunch of CSS. To apply a class to the scrollbars you just need to pass the scrollbarClass option:

myScroll = new iScroll('wrapper', { scrollbarClass: 'myScrollbar' });

<div class="myScrollBarV">
    <div></div>
</div
How to style it:
.myScrollbarV {
    position:absolute;
    z-index:100;
    width:8px;bottom:7px;top:2px;right:1px
}

.myScrollbarV > div {
    position:absolute;
    z-index:100;
    width:100%;

    /* The following is probably what you want to customize */
    background:-webkit-gradient(linear, 0 0, 100% 0, from(#f00), to(#900));
    border:1px solid #800;
    -webkit-background-clip:padding-box;
    -webkit-box-sizing:border-box;
    -webkit-border-radius:4px;
    -webkit-box-shadow:inset 1px 1px 0 rgba(255,255,255,0.5);
}

To completely destroy the iScroll and free some (a lot of) memory, call the destroy() method.

Best way to destroy an iScroll:
myScroll.destroy();
myScroll = null;



RE: iScroll implementation using Aria Templates - hussain - 10 July 2013 11:46

Hello,

As the iScroll implementation takes only li as snapshot, is there any option to include other elements or elements based on class selectors

Thanks

M Hussain