Support variable scroll containers

Author: tdreyno

controllers/element-visible-controller.js

@@ -27,23 +27,27 @@ function ElementVisibleController(elem, options) {
   this.buffer = Util.getOption(options.buffer, 0);
   this.isVisible = false;
   this.rect = null;
+  this.scrollTarget = options.scrollTarget;
 
   // Auto trigger if the last value on the stream is what we're looking for.
   var oldOn = this.on;
   this.on = function wrappedOn(eventName, callback, scope) {
     oldOn.apply(this, arguments);
-    
+
     if (('enter' === eventName) && this.isVisible) {
       scope ? callback.call(scope) : callback();
     }
   };
 
-  var sc = new ScrollController();
+  var sc = new ScrollController({
+    scrollTarget: this.scrollTarget
+  });
+
   sc.on('scroll', this.didScroll, this);
   sc.on('scrollEnd', this.recalculatePosition, this);
 
   Stream.onValue(ResizeStream.create(), Util.functionBind(this.didResize, this));
-  
+
   this.viewportRect = {
     height: window.innerHeight,
     top: 0
@@ -68,7 +72,7 @@ ElementVisibleController.prototype.recalculateOffsets = function() {
 };
 
 ElementVisibleController.prototype.recalculatePosition = function(currentScrollY) {
-  currentScrollY || (currentScrollY = DOM.documentScrollY());
+  currentScrollY || (currentScrollY = DOM.documentScrollY(this.scrollTarget && this.scrollTarget.parentNode));
 
   this.rect = DOM.getRect(this.elem);
   this.rect.top += currentScrollY;
@@ -78,7 +82,7 @@ ElementVisibleController.prototype.recalculatePosition = function(currentScrollY
 };
 
 ElementVisibleController.prototype.update = function(currentScrollY, ignoreCurrentVisibility) {
-  currentScrollY || (currentScrollY = DOM.documentScrollY());
+  currentScrollY || (currentScrollY = DOM.documentScrollY(this.scrollTarget && this.scrollTarget.parentNode));
 
   this.viewportRect.top = currentScrollY;
 

core/dom.js

@@ -36,9 +36,14 @@ var detectedIE10_ = (navigator.userAgent.indexOf('MSIE 10') !== -1);
 
 /**
  * Get the document scroll.
+ * @param {Element} targetElement - Optional target element.
  * @return {number}
  */
-function documentScrollY() {
+function documentScrollY(targetElement) {
+  if (targetElement && (targetElement !== window)) {
+    return targetElement.scrollTop;
+  }
+
   if (detectedIE10_ && (window.pageYOffset != document.documentElement.scrollTop)) {
     return document.documentElement.scrollTop;
   }
@@ -59,7 +64,7 @@ function getRect(elem) {
   if (!elem || 1 !== elem.nodeType) {
     return false;
   }
-  
+
   var bounds = elem.getBoundingClientRect();
 
   return {
@@ -111,7 +116,7 @@ function insertBefore(before, elem) {
 
 function detachElement(elem) {
   if (elem.parentNode) {
-    elem.parentNode.removeChild(elem); 
+    elem.parentNode.removeChild(elem);
   }
 }
 

core/responsive-image.js

@@ -19,10 +19,10 @@ function ResponsiveImage() {
   this.src = null;
   this.isFlexible = false;
   this.hasRetina = false;
-  this.hasRunOnce = false;
   this.preserveAspectRatio = false;
   this.knownDimensions = null;
   this.hasLoaded = false;
+  this.hasRunOnce = false;
 }
 
 function create(imageMap) {
@@ -36,7 +36,12 @@ function create(imageMap) {
   }
 
   if (image.lazyLoad) {
-    image.observer = new ElementVisibleController(image.element);
+    image.observer = new ElementVisibleController(
+      image.element,
+      {
+        scrollTarget: imageMap.getScrollTarget(image.element)
+      }
+    );
 
     image.observer.on('enter', function onEnter_() {
       if (!image.checkIfVisible(image)) { return; }
@@ -71,6 +76,9 @@ function createFromElement(elem, options) {
     preserveAspectRatio: Util.getOption(options.preserveAspectRatio, elem.getAttribute('data-preserveAspectRatio') === 'true'),
     checkIfVisible: Util.getOption(options.checkIfVisible, function() {
       return true;
+    }),
+    getScrollTarget: Util.getOption(options.getScrollTarget, function() {
+      return window;
     })
   };
 

streams/scroll-stream.js

@@ -4,14 +4,19 @@ var DOM = require('../core/dom');
 var Events = require('../core/events');
 
 /**
- * Create a stream of window.onscroll events, but only calculate their
+ * Create a stream of onscroll events, but only calculate their
  * position on requestAnimationFrame frames.
+ * @param {Element=} options.scrollTarget - Targeted for scroll checking.
  * @return {Stream}
  */
-var create = Util.memoize(function create_() {
+function create(options) {
+  options = options || {};
+
+  var scrollParent = options.scrollTarget ? options.scrollTarget.parentNode : window;
+
   var oldScrollY;
   var scrollDirty = true;
-  var scrollEventsStream = Stream.createFromEvents(window, 'scroll');
+  var scrollEventsStream = Stream.createFromEvents(scrollParent, 'scroll');
 
   Stream.onValue(scrollEventsStream, function onScrollSetDirtyBit_() {
     scrollDirty = true;
@@ -23,7 +28,8 @@ var create = Util.memoize(function create_() {
     if (!scrollDirty) { return false; }
     scrollDirty = false;
 
-    var newScrollY = DOM.documentScrollY();
+    var newScrollY = DOM.documentScrollY(scrollParent);
+
     if (oldScrollY !== newScrollY) {
       oldScrollY = newScrollY;
       return true;
@@ -33,11 +39,13 @@ var create = Util.memoize(function create_() {
   }, rAF);
 
   // It's going to space, will you just give it a second!
-  Util.defer(Util.partial(Events.dispatchEvent, window, 'scroll'), 10);
+  Util.defer(Util.partial(Events.dispatchEvent, options.scrollTarget, 'scroll'), 10);
 
   return Stream.map(function getWindowPosition_() {
     return oldScrollY;
   }, didChangeOnRAFStream);
-});
+};
 
-module.exports = { create: create };
+module.exports = {
+  create: create
+};