Merge 10ba5fe into 56d231a

src/index.js

@@ -12,7 +12,6 @@ const LISTEN_FLAG = 'data-lazyload-listened';
 const listeners = [];
 let pending = [];
 
-
 /**
  * Check if `component` is visible in overflow container `parent`
  * @param  {node} component React component
@@ -21,24 +20,43 @@ let pending = [];
  */
 const checkOverflowVisible = function checkOverflowVisible(component, parent) {
   const node = ReactDom.findDOMNode(component);
-
-  const { top: parentTop, height: parentHeight } = parent.getBoundingClientRect();
-  const windowInnerHeight = window.innerHeight || document.documentElement.clientHeight;
-
-  // calculate top and height of the intersection of the element's scrollParent and viewport
-  const intersectionTop = Math.max(parentTop, 0); // intersection's top relative to viewport
-  const intersectionHeight = Math.min(windowInnerHeight, parentTop + parentHeight) - intersectionTop; // height
-
-  // check whether the element is visible in the intersection
-  const { top, height } = node.getBoundingClientRect();
-  const offsetTop = top - intersectionTop; // element's top relative to intersection
-
-  const offsets = Array.isArray(component.props.offset) ?
-                component.props.offset :
-                [component.props.offset, component.props.offset]; // Be compatible with previous API
-
-  return (offsetTop - offsets[0] <= intersectionHeight) &&
-         (offsetTop + height + offsets[1] >= 0);
+  if(!!component.props.checkHorizontalScroll) {
+    const { left: parentLeft, width: parentWidth } = parent.getBoundingClientRect();
+    const windowInnerWidth = window.innerWidth || document.documentElement.clientWidth;
+
+    // calculate left and width of the intersection of the element's scrollParent and viewport
+    const intersectionLeft = Math.max(parentLeft, 0); // intersection's left relative to viewport
+    const intersectionWidth = Math.min(windowInnerWidth, parentLeft + parentWidth) - intersectionLeft; // Width
+
+    // check whether the element is visible in the intersection
+    const { left, width } = node.getBoundingClientRect();
+    const offsetLeft = left - intersectionLeft; // element's left relative to intersection
+
+    const offsets = Array.isArray(component.props.offset) ?
+                  component.props.offset :
+                  [component.props.offset, component.props.offset]; // Be compatible with previous API
+
+    return (offsetLeft - offsets[0] <= intersectionWidth) &&
+           (offsetLeft + width + offsets[1] >= 0);
+  } else {
+    const { top: parentTop, height: parentHeight } = parent.getBoundingClientRect();
+    const windowInnerHeight = window.innerHeight || document.documentElement.clientHeight;
+
+    // calculate top and height of the intersection of the element's scrollParent and viewport
+    const intersectionTop = Math.max(parentTop, 0); // intersection's top relative to viewport
+    const intersectionHeight = Math.min(windowInnerHeight, parentTop + parentHeight) - intersectionTop; // height
+
+    // check whether the element is visible in the intersection
+    const { top, height } = node.getBoundingClientRect();
+    const offsetTop = top - intersectionTop; // element's top relative to intersection
+
+    const offsets = Array.isArray(component.props.offset) ?
+                  component.props.offset :
+                  [component.props.offset, component.props.offset]; // Be compatible with previous API
+
+    return (offsetTop - offsets[0] <= intersectionHeight) &&
+           (offsetTop + height + offsets[1] >= 0);
+  }
 };
 
 /**
@@ -255,15 +273,17 @@ LazyLoad.propTypes = {
   children: PropTypes.node,
   throttle: PropTypes.oneOfType([PropTypes.number, PropTypes.bool]),
   debounce: PropTypes.oneOfType([PropTypes.number, PropTypes.bool]),
-  placeholder: PropTypes.node
+  placeholder: PropTypes.node,
+  checkHorizontalScroll : PropTypes.bool
 };
 
 LazyLoad.defaultProps = {
   once: false,
   offset: 0,
   overflow: false,
   resize: false,
-  scroll: true
+  scroll: true,
+  checkHorizontalScroll: false
 };
 
 import decorator from './decorator';