IScroll4，如何在div滾動時調用函數？

Question

當用戶在iScroll4中滾動時，我想調用一些動作。 還取決於滾動的位置和速度。

在哪里以及如何最好地解決這個問題？

使用addListener我沒有運氣，因為它會對准時事件作出反應，例如。 Touchmove，touchstart。 我需要的是知道div何時滾動..

有任何想法嗎？

Answer 1

iScroll有很多回調函數。 您可以將它們用於您的目的。

關於那些的一個小解釋。

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. */
  }
});

我剛給你一些關於回調函數的小解釋。 但是還有一些存在，比如onTouchEnd ， onZoomStart ， onZoom ， onZoomEnd 。 如果需要，您可以嘗試這些。

我希望這可以幫助你解決問題。

---

獲取滾動條位置和速度的最新更新。

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

供您參考console.log(e)並分析e的值。 它返回了許多x & y位置。 從那些你可以直接獲得滾動位置。 但要獲得滾動條的速度，你必須使用physics ;）。 它返回timestamp ， scroller position 。 我想你可以使用這些值來獲得速度。 我很抱歉，我無法分析這些值，以確切地說明如何獲得speed 。 但我認為您可以使用可用值來計算速度。

Answer 2

scroll事件僅在iScroll探針版本（iscroll-probe.js）上可用。 可以通過probeType選項更改探測行為。

你可以在你的html中包含“iscroll-probe.js”並且：

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