Add support for horizontal scroll

Author: Aljullu

src/components/LazyLoadImage.jsx

@@ -63,17 +63,24 @@ class LazyLoadImage extends React.Component {
     const boundingBox = {
       bottom: this.refs.placeholder.offsetTop +
         this.refs.placeholder.offsetHeight,
+      left: this.refs.placeholder.offsetLeft,
+      right: this.refs.placeholder.offsetLeft +
+        this.refs.placeholder.offsetWidth,
       top: this.refs.placeholder.offsetTop
     };
     const viewport = {
-      bottom: scrollPosition + window.innerHeight,
-      top: scrollPosition
+      bottom: scrollPosition.y + window.innerHeight,
+      left: scrollPosition.x,
+      right: scrollPosition.x + window.innerWidth,
+      top: scrollPosition.y
     };
 
     this.previousBoundingBox = boundingBox;
 
     return Boolean(viewport.top - threshold <= boundingBox.bottom &&
-      viewport.bottom + threshold >= boundingBox.top);
+      viewport.bottom + threshold >= boundingBox.top &&
+      viewport.left - threshold <= boundingBox.right &&
+      viewport.right + threshold >= boundingBox.left);
   }
 
   getPlaceholder() {
@@ -108,7 +115,10 @@ class LazyLoadImage extends React.Component {
 }
 
 LazyLoadImage.propTypes = {
-  scrollPosition: PropTypes.number.isRequired,
+  scrollPosition: PropTypes.shape({
+    x: PropTypes.number.isRequired,
+    y: PropTypes.number.isRequired
+  }).isRequired,
   afterLoad: PropTypes.func,
   beforeLoad: PropTypes.func,
   className: PropTypes.string,

src/components/LazyLoadImage.spec.js

@@ -14,7 +14,7 @@ describe('LazyLoadImage', function() {
       afterLoad = () => null,
       beforeLoad = () => null,
       placeholder = null,
-      scrollPosition = 0
+      scrollPosition = {x: 0, y: 0}
     } = {}) {
     return ReactTestUtils.renderIntoDocument(
       <LazyLoadImage
@@ -40,7 +40,7 @@ describe('LazyLoadImage', function() {
 
   it('renders the default placeholder when it\'s not in the viewport', function() {
     const lazyLoadImage = renderLazyLoadImage({
-      scrollPosition: -1000
+      scrollPosition: {x: 0, y: -1000}
     });
 
     expectImages(lazyLoadImage, 0);
@@ -50,7 +50,7 @@ describe('LazyLoadImage', function() {
   it('renders the prop placeholder when it\'s not in the viewport', function() {
     const placeholder = <span className="test-placeholder"></span>;
     const lazyLoadImage = renderLazyLoadImage({
-      scrollPosition: -1000,
+      scrollPosition: {x: 0, y: -1000},
       placeholder
     });
 
@@ -67,10 +67,10 @@ describe('LazyLoadImage', function() {
 
   it('renders the image when it appears in the viewport', function() {
     const lazyLoadImage = renderLazyLoadImage({
-      scrollPosition: -1000
+      scrollPosition: {x: 0, y: -1000}
     });
 
-    lazyLoadImage.componentWillReceiveProps({scrollPosition: 0});
+    lazyLoadImage.componentWillReceiveProps({scrollPosition:  {x: 0, y: 0}});
 
     expectImages(lazyLoadImage, 1);
     expectPlaceholders(lazyLoadImage, 0);
@@ -80,7 +80,7 @@ describe('LazyLoadImage', function() {
     const beforeLoad = jest.fn();
     const lazyLoadImage = renderLazyLoadImage({
       beforeLoad,
-      scrollPosition: -1000
+      scrollPosition: {x: 0, y: -1000}
     });
 
         expect(beforeLoad).toHaveBeenCalledTimes(0);
@@ -99,10 +99,10 @@ describe('LazyLoadImage', function() {
     const beforeLoad = jest.fn();
     const lazyLoadImage = renderLazyLoadImage({
       beforeLoad,
-      scrollPosition: -1000
+      scrollPosition: {x: 0, y: -1000}
     });
 
-    lazyLoadImage.componentWillReceiveProps({scrollPosition: 0});
+    lazyLoadImage.componentWillReceiveProps({scrollPosition:  {x: 0, y: 0}});
 
     expect(beforeLoad).toHaveBeenCalledTimes(1);
   });
@@ -111,7 +111,7 @@ describe('LazyLoadImage', function() {
     const afterLoad = jest.fn();
     const lazyLoadImage = renderLazyLoadImage({
       afterLoad,
-      scrollPosition: -1000
+      scrollPosition: {x: 0, y: -1000}
     });
 
     expect(afterLoad).toHaveBeenCalledTimes(0);
@@ -130,10 +130,10 @@ describe('LazyLoadImage', function() {
     const afterLoad = jest.fn();
     const lazyLoadImage = renderLazyLoadImage({
       afterLoad,
-      scrollPosition: -1000
+      scrollPosition:  {x: 0, y: -1000}
     });
 
-    lazyLoadImage.componentWillReceiveProps({scrollPosition: 0});
+    lazyLoadImage.componentWillReceiveProps({scrollPosition: {x: 0, y: 0}});
 
     expect(afterLoad).toHaveBeenCalledTimes(1);
   });

src/hoc/trackWindowScroll.js

@@ -6,7 +6,10 @@ const trackWindowScroll = (BaseComponent) => {
       super(props);
 
       this.state = {
-        scrollPosition: window.scrollY || window.pageYOffset
+        scrollPosition: {
+          x: window.scrollX || window.pageXOffset,
+          y: window.scrollY || window.pageYOffset
+        }
       };
     }
 
@@ -22,7 +25,10 @@ const trackWindowScroll = (BaseComponent) => {
 
     onChangeScroll() {
       this.setState({
-        scrollPosition: window.scrollY || window.pageYOffset
+        scrollPosition: {
+          x: window.scrollX || window.pageXOffset,
+          y: window.scrollY || window.pageYOffset
+        }
       });
     }
 
@@ -39,4 +45,3 @@ const trackWindowScroll = (BaseComponent) => {
 };
 
 export default trackWindowScroll;
-