right left scrolling example

README.md

@@ -210,6 +210,8 @@ module.exports = function(environment) {
     }
   };
 };
+
+Note if you want to disable right and left in-viewport triggers, set these values to `Infinity`.
 ```
 ## [**IntersectionObserver**'s Browser Support](https://platform-status.mozilla.org/)
 

tests/acceptance/infinity-test.js

@@ -19,7 +19,19 @@ module('Acceptance | infinity-scrollable', function(hooks) {
 
     await waitFor('.infinity-scrollable.inactive');
 
-    // assert.equal(findAll('.infinity-svg').length, 20);
+    assert.equal(findAll('.infinity-svg').length, 20);
+  });
+
+  test('IntersectionObserver Component fetches more data when left to right scrolling', async function(assert) {
+    await visit('/infinity-right-left');
+
+    assert.equal(findAll('.infinity-svg').length, 10);
+    assert.equal(findAll('.infinity-scrollable.inactive').length, 1, 'component is inactive before fetching more data');
+    document.querySelector('.infinity-scrollable').scrollIntoView(false);
+
+    await waitFor('.infinity-scrollable.inactive');
+
+    assert.equal(findAll('.infinity-svg').length, 20);
   });
 
   test('rAF Component fetches more data when scrolled into viewport', async function(assert) {

tests/dummy/app/controllers/infinity-right-left.js

@@ -0,0 +1,25 @@
+import Controller from '@ember/controller';
+import { set, get } from '@ember/object';
+
+let rect = '<rect x="10" y="10" width="30" height="30" stroke="black" fill="transparent" stroke-width="5"/>';
+let circle = '<circle cx="25" cy="75" r="20" stroke="red" fill="transparent" stroke-width="5"/>';
+let line = '<line x1="10" x2="50" y1="110" y2="150" stroke="orange" stroke-width="5"/>';
+
+const images = [rect, circle, line];
+
+export default Controller.extend({
+  init() {
+    this._super(...arguments);
+    this.viewportToleranceOverride = {
+      right: 100
+    }
+  },
+
+  actions: {
+    infinityLoad() {
+      const newModels = [...Array(10).fill().map(() => `${images[(Math.random() * images.length) | 0]}`)];
+      get(this, 'model').push(...newModels);
+      set(this, 'model', Array.from(get(this, 'model')));
+    }
+  }
+});

tests/dummy/app/controllers/infinity-scrollable.js

@@ -1,6 +1,5 @@
 import Controller from '@ember/controller';
 import { set, get } from '@ember/object';
-import { later } from '@ember/runloop';
 
 let rect = '<rect x="10" y="10" width="30" height="30" stroke="black" fill="transparent" stroke-width="5"/>';
 let circle = '<circle cx="25" cy="75" r="20" stroke="red" fill="transparent" stroke-width="5"/>';
@@ -19,13 +18,8 @@ export default Controller.extend({
   actions: {
     infinityLoad() {
       const newModels = [...Array(10).fill().map(() => `${images[(Math.random() * images.length) | 0]}`)];
-      return new Promise((resolve) => {
-        later(() => {
-          get(this, 'model').push(...newModels);
-          set(this, 'model', Array.from(get(this, 'model')));
-          resolve();
-        }, 0);
-      });
+      get(this, 'model').push(...newModels);
+      set(this, 'model', Array.from(get(this, 'model')));
     }
   }
 });

tests/dummy/app/router.js

@@ -11,6 +11,7 @@ Router.map(function() {
   this.route('infinity-scrollable');
   this.route('infinity-scrollable-raf');
   this.route('infinity-scrollable-scrollevent');
+  this.route('infinity-right-left');
 });
 
 export default Router;

tests/dummy/app/routes/infinity-right-left.js

@@ -0,0 +1,13 @@
+import Route from '@ember/routing/route';
+
+let rect = '<rect x="10" y="10" width="30" height="30" stroke="black" fill="transparent" stroke-width="5"/>';
+let circle = '<circle cx="25" cy="75" r="20" stroke="red" fill="transparent" stroke-width="5"/>';
+let line = '<line x1="10" x2="50" y1="110" y2="150" stroke="orange" stroke-width="5"/>';
+
+const images = [rect, circle, line];
+
+export default Route.extend({
+  model() {
+    return [...Array(10).fill().map(() => `${images[(Math.random() * images.length) | 0]}`)];
+  }
+});

tests/dummy/app/templates/application.hbs

@@ -5,6 +5,7 @@
   <li>{{link-to "Infinity Scrollable IntersectionObserver" "infinity-scrollable"}}</li>
   <li>{{link-to "Infinity Scrollable rAF" "infinity-scrollable-raf"}}</li>
   <li>{{link-to "Infinity Scrollable Event" "infinity-scrollable-scrollevent"}}</li>
+  <li>{{link-to "Infinity Right Left" "infinity-right-left"}}</li>
 </ul>
 
 {{outlet}}

tests/dummy/app/templates/infinity-right-left.hbs

@@ -0,0 +1,18 @@
+<div class="list" style="height: 200px; overflow: scroll;">
+  <ul style="display:flex">
+    {{#each model as |val|}}
+      <div class="infinity-svg">
+        <svg width="200" height="250" version="1.1" xmlns="http://www.w3.org/2000/svg">
+          {{{val}}}
+        </svg>
+      </div>
+    {{/each}}
+
+    {{my-component
+      class="infinity-scrollable"
+      scrollableAreaOverride=".list"
+      viewportSpyOverride=true
+      viewportToleranceOverride=viewportToleranceOverride
+      infinityLoad=(action "infinityLoad")}}
+  </ul>
+</div>