how iscroll scrolls ? I can't figure out how it swipes up or swipes down

Question

My iscroll object will not swipe down to the bottom but have some distance to the bottom when i tries to swipe down in my android phone. The HTML template like this:

 /*The HTML template code like this:*/
 <div class="content">
    <div class="scroller">
       <div class="div1">
       </div>
    </div>
 </div>

 /*The javascript code like this:*/
 $.get(url, function(html){
                _this.$('.div1').html(html);
                _this.$('.div1').css('display','inline-block');
                var width=_this.$('.div1').width()||'400px';
                var height=_this.$('.div1').height()||'900px';
                //height+=210;
                if(width<=400)width=400;
                _this.$('.div1').css('width',width);
                _this.$('.div1').css('height',height);
                _this.$('.scroller').css('width',width);
                _this.$('.scroller').css('height',height);
                if(html.indexOf('errorpage')<=0)
                    _this.$('.div1').addClass('padding-all-4px');
                setTimeout(function () {
                    _this.scroll = new iScroll(_this.$('.content')[0],{
                        hScroll: true,
                        vScroll: true,
                        lockDirection: false,
                        zoom: true,
                        zoomMin: 0.5,
                        zoomMax: 4,
                        doubleTapZoom: 2
                    });
                }, 0);
            });

We are not mutants to read your mind dear. Place some code to check and make you question clear enough please... :) — Faizul Hasan, Mar 04 '13 at 09:17

score 2 · Accepted Answer · answered Mar 04 '13 at 10:12

There are two ways of using iScroll. Either you can go with jScroll wrapper for iScroll or else pure iScroll. In order iScroll work properly to the container which you are attaching the iScroll, it should satisfy some conditions

container should have position either relative or absolute
container should have height (if you want vScroll) and width (if you want hScroll)
container overflow should be hidden (this is being handled by the plugin itself)
You do not need to set any height for child container. Child container height should be depends on its contents

Try something like this.

The HTML template code like this:

<div class="content">
    <div id="scroller_content">
       <div class="dynamic-content">
         <!-- you contents should be here -->
       </div>
    </div>
 </div>

The javascript code like this:

var scrollContent = new iScroll('scroller_content', {
    /* other options goes here */
  }
});

If you are dynamically load the contents to child container then what you can do is after loading the contents simply refresh the iScroll object

scrollContent.refresh();

In case if you wanted to use iScroll inside iScroll try something like this.

Will say you enable two iScroll. And child_container element is inside your parent_container. Then,

var parentScroller, childScroller, childScrollerTimeout;

parentScroller = new iScroll('parent_container',{
  /* other options goes here */
});

childScroller = new iScroll('child_container',{
  /* other options goes here */
  onBeforeScrollStart : function(e){
    clearTimeout(childScrollerTimeout);
    parentScroller.disable();
  },
  onScrollEnd:function(){
    childScrollerTimeout = setTimeout(function(){
     parentScroller.enable()},500);
    /* it is required to use timeout. If not second time onBeforeScroll will not work as expected */
  }
});

If you do not understand anything please let me know. I will demonstrate it further. Apologize me if I did any mistakes here. Hope this will help at least a bit.. :)

how iscroll scrolls ? I can't figure out how it swipes up or swipes down

1 Answers1