IScroll4, how to call functions when the div is sc

Question

I want to call some actions, when the user is scrolling in iScroll4. Also depending on the position and speed on the scrolling.

Where and how to hook in best to achive this?

With addListener I had no luck, because it reacts on on-time events, eg. Touchmove, touchstart. What i need is to know when the div is scrolling..

Any ideas?

Answer 1

The scroll event is available on iScroll probe edition only (iscroll-probe.js). The probe behavior can be altered through the probeType option.

you can include "iscroll-probe.js" in your html and :

    var myScroll = new IScroll('#container', { probeType: 3, mouseWheel: true });
        myScroll.on('scroll',function(){
        var top = parseInt(-this.y);// scrolltop value
        //do something with top         
    })

Answer 2

There are lot of callback functions iScroll. You can use those for your purposes.

A small explanation about those.

scroller = new iScroll('ID', {
  onRefresh : function(){
    /* iScroll provided feature to refresh the scroller. This will help to refresh the scroller container when you dynamically add contents. */
  },
  onBeforeScrollStart : function(e){
    /* this is nothing but just when your mousedown event (This will be triggered each and every mousedown event). This is very useful when your parent container have scroller and your child container also have scroller. Assume this is your child scroller. What you can do is just get your parent scroller object (parentScroller) and disable it "parentScroller.disable()" */
  },
  onScrollStart : function(){
    /* now you start to move your mouse while holding mouse left button */
  },
  onBeforeScrollMove : function(){
    /* this where your scroller is start to move actually */
  },
  onScrollMove : function(){
    /* now your scroller is moving. If you need to do something, when your scroller is moving you can do those here */
  },
  onBeforeScrollEnd : function(){
    /* your scroller movement is about to stop */
  },
  onScrollEnd : function(){
    /* your scorller movement stoped. Will say you have disable your parent scroller. Now this is the good place to enable your parent scroller "parentScroller.enable()"*/
  },
  onDestroy : function(){
    /* you destroy your scroller. iScroll is provide a feature to remove the attached sctoller. */
  }
});

I just gave you a small explanation about the some of callback functions. But there are some more exists such as onTouchEnd, onZoomStart, onZoom, onZoomEnd. You can experiment those if you need.

I hope this might help you to sort out issue.

---

Latest Update to get the position and speed of the scroller.

scroller = new iScroll('ID', {
  onScrollMove : function(e){
    /* this function return an object in which it has almost all the required stuffs. */
  }
});

For your reference console.log(e) and analyze the value e has. It return lot of x & y positions. From those you can get the scroller position directly. But to get the speed of the scroller you have to use physics ;). It returns timestamp, scroller position. I think you might to able to get the speed using these values. I am sorry at the moment I could not analyze these values to exactly say how you can get the speed. But I think you can calculate speed using the values available.