Bind to event other than native scroll

README.md

@@ -834,6 +834,9 @@ Disable scroll updates. This is useful in the rare case when you want to manipul
 Enable scroll updates.
 
 ### Release History
+*0.3.5*
+* Added [PR 26](https://github.com/sjwilliams/scrollstory/pull/26) Optionally to bind to event other than native scroll.
+
 *0.3.4*
 * Fixed missing 'index' passed to `.each()` callback that was original added in [Issue 7](https://github.com/sjwilliams/scrollstory/issues/7), but got lost in the 0.3 rewrite.
 

dist/jquery.scrollstory.js

@@ -1,5 +1,5 @@
 /**
-* @preserve ScrollStory - v0.3.4 - 2015-07-29
+* @preserve ScrollStory - v0.3.5 - 2015-11-18
 * https://github.com/sjwilliams/scrollstory
 * Copyright (c) 2015 Josh Williams; Licensed MIT 
 */
@@ -32,6 +32,10 @@
     // Offset from top to trigger a change
     triggerOffset: 0,
 
+    // Event to monitor. Can be a name for an event on the $(window), or
+    // a function that defines custom behavior. Defaults to native scroll event.
+    scrollEvent: 'scroll',
+
     // Automatically activate the first item on load, 
     // regardless of its position relative to the offset
     autoActivateFirstItem: false,
@@ -167,8 +171,8 @@
     };
   };
 
-  var $win = $(window);
-  var winHeight = $win.height(); // cached. updated via _handleResize()
+  var $window = $(window);
+  var winHeight = $window.height(); // cached. updated via _handleResize()
 
   /**
    * Given a scroll/trigger offset, determine
@@ -205,11 +209,15 @@
     this.el = element;
     this.$el = $(element);
     this.options = $.extend({}, defaults, options);
+
+    this.useNativeScroll = (typeof this.options.scrollEvent === 'string') && (this.options.scrollEvent.indexOf('scroll') === 0);
+
     this._defaults = defaults;
     this._name = pluginName;
     this._instanceId = (function() {
       return pluginName + '_' + instanceCounter;
     })();
+
     this.init();
   }
 
@@ -229,8 +237,6 @@
       this._activeItem;
       this._previousItems = [];
 
-
-
       /**
        * Attach handlers before any events are dispatched
        */
@@ -322,20 +328,66 @@
       }
 
 
-
       /**
-       * bind and throttle page events. do it after 'complete' trigger
-       * so no items are yes active when those callbacks run.
+       * Watch either native scroll events, throttled by 
+       * this.options.scrollSensitivity, or a custom event 
+       * that implements its own throttling.
+       *
+       * Bind these events after 'complete' trigger so no
+       * items are active when those callbacks runs.
        */
-      var scrollThrottle = (this.options.throttleType === 'throttle') ? throttle : debounce;
-      var boundScroll = scrollThrottle(this._handleScroll.bind(this), this.options.scrollSensitivity, this.options.throttleTypeOptions);
-      $(window, 'body').on('scroll', boundScroll);
+
+      var scrollThrottle, scrollHandler;
 
-      // anything that might cause a repaint      
-      var resizeThrottle = debounce(this._handleResize, 100);
-      $(window).on('DOMContentLoaded load resize', resizeThrottle.bind(this));
+      if(this.useNativeScroll){
 
+        // bind and throttle native scroll
+        scrollThrottle = (this.options.throttleType === 'throttle') ? throttle : debounce;
+        scrollHandler = scrollThrottle(this._handleScroll.bind(this), this.options.scrollSensitivity, this.options.throttleTypeOptions);
+        $window.on('scroll', scrollHandler);
+      } else {
 
+        // bind but don't throttle custom event
+        scrollHandler = this._handleScroll.bind(this);
+
+        // if custom event is a function, it'll need
+        // to call the scroll handler manually, like so:
+        //
+        //  $container.scrollStory({
+        //    scrollEvent: function(cb){
+        //      // custom scroll event on nytimes.com
+        //      PageManager.on('nyt:page-scroll', function(){
+        //       // do something interesting if you like
+        //       // and then call the passed in handler();
+        //       cb();
+        //     });
+        //    }
+        //  });
+        //
+        //
+        // Otherwise, it's a string representing an event on the
+        // window to subscribe to, like so:
+        //
+        // // some code dispatching throttled events
+        // $window.trigger('nytg-scroll');
+        // 
+        //  $container.scrollStory({
+        //    scrollEvent: 'nytg-scroll'
+        //  });
+        //
+
+        if (typeof this.options.scrollEvent === 'function') {
+          this.options.scrollEvent(scrollHandler);
+        } else {
+          $window.on(this.options.scrollEvent, function(){
+            scrollHandler();
+          });
+        }
+      }
+
+      // anything that might cause a repaint      
+      var resizeThrottle = debounce(this._handleResize, 100);
+      $window.on('DOMContentLoaded load resize', resizeThrottle.bind(this));
 
       instanceCounter = instanceCounter + 1;
     },
@@ -1134,7 +1186,7 @@
      * Keep state correct while resizing
      */
     _handleResize: function() {
-      winHeight = $win.height();
+      winHeight = $window.height();
 
       if (this.options.enabled && this.options.autoUpdateOffsets) {