scrollama - npm Package Compare versions

Comparing version 2.1.2 to 2.1.3

build/scrollama.js

@@ -125,4 +125,3 @@ (function (global, factory) {
     'viewportAbove',
-    'viewportBelow'
-  ];
+    'viewportBelow' ];
 
@@ -132,3 +131,3 @@ var cb = {
     stepExit: function () {},
-    stepProgress: function () {}
+    stepProgress: function () {},
   };
@@ -147,4 +146,4 @@ var io = {};
   var pageH = 0;
-	var previousYOffset = 0;
-	var progressThreshold = 0;
+  var previousYOffset = 0;
+  var progressThreshold = 0;
 
@@ -163,3 +162,3 @@ var isReady = false;
 
-  /*** HELPERS ***/
+  /* HELPERS */
   function generateInstanceID() {
@@ -198,7 +197,7 @@ var a = 'abcdefghijklmnopqrstuv';
 
-	function updateDirection() {
-		if (window.pageYOffset > previousYOffset) { direction = 'down'; }
-		else if (window.pageYOffset < previousYOffset) { direction = 'up'; }
-		previousYOffset = window.pageYOffset;
-	}
+  function updateDirection() {
+    if (window.pageYOffset > previousYOffset) { direction = 'down'; }
+    else if (window.pageYOffset < previousYOffset) { direction = 'up'; }
+    previousYOffset = window.pageYOffset;
+  }
 
@@ -225,7 +224,12 @@ function disconnectObserver(name) {
   function handleEnable(enable) {
-    if (enable && !isEnabled) { // enable a disabled scroller
-      if (isReady) { // enable a ready scroller
+    if (enable && !isEnabled) {
+      // enable a disabled scroller
+      if (isReady) {
+        // enable a ready scroller
         updateIO();
-      } else { // can't enable an unready scroller
-        console.error('scrollama error: enable() called before scroller was ready');
+      } else {
+        // can't enable an unready scroller
+        console.error(
+          'scrollama error: enable() called before scroller was ready'
+        );
         isEnabled = false;
@@ -235,3 +239,4 @@ return; // all is not well, don't set the requested state
     }
-    if (!enable && isEnabled) { // disable an enabled scroller
+    if (!enable && isEnabled) {
+      // disable an enabled scroller
       OBSERVER_NAMES.forEach(disconnectObserver);
@@ -246,3 +251,3 @@ }
     var ratio = 1 / count;
-    for (var i = 0; i < count; i++) {
+    for (var i = 0; i < count; i += 1) {
       t.push(i * ratio);
@@ -253,4 +258,3 @@ }
 
-  /*** NOTIFY CALLBACKS ***/
-
+  /* NOTIFY CALLBACKS */
   function notifyStepProgress(element, progress) {
@@ -267,3 +271,3 @@ var index = getIndex(element);
       // check if steps above/below were skipped and should be notified first
-      for (var i = 0; i < index; i++) {
+      for (var i = 0; i < index; i += 1) {
         var ss = stepStates[i];
@@ -280,3 +284,3 @@ if (ss.state !== 'enter' && ss.direction !== 'down') {
     } else if (location === 'below') {
-      for (var i$1 = stepStates.length - 1; i$1 > index; i$1--) {
+      for (var i$1 = stepStates.length - 1; i$1 > index; i$1 -= 1) {
         var ss$1 = stepStates[i$1];
@@ -294,16 +298,14 @@ if (ss$1.state === 'enter') {
 
-  function notifyStepEnter(element, direction, check) {
+  function notifyStepEnter(element, dir, check) {
     if ( check === void 0 ) check = true;
 
     var index = getIndex(element);
-    var resp = { element: element, index: index, direction: direction };
+    var resp = { element: element, index: index, direction: dir };
 
     // store most recent trigger
-    stepStates[index].direction = direction;
+    stepStates[index].direction = dir;
     stepStates[index].state = 'enter';
-    if (preserveOrder && check && direction === 'down')
-      { notifyOthers(index, 'above'); }
+    if (preserveOrder && check && dir === 'down') { notifyOthers(index, 'above'); }
 
-    if (preserveOrder && check && direction === 'up')
-      { notifyOthers(index, 'below'); }
+    if (preserveOrder && check && dir === 'up') { notifyOthers(index, 'below'); }
 
@@ -319,10 +321,10 @@ if (cb.stepEnter && !exclude[index]) {
 
-  function notifyStepExit(element, direction) {
+  function notifyStepExit(element, dir) {
     var index = getIndex(element);
-    var resp = { element: element, index: index, direction: direction };
+    var resp = { element: element, index: index, direction: dir };
 
     if (progressMode) {
-      if (direction === 'down' && stepStates[index].progress < 1)
+      if (dir === 'down' && stepStates[index].progress < 1)
         { notifyStepProgress(element, 1); }
-      else if (direction === 'up' && stepStates[index].progress > 0)
+      else if (dir === 'up' && stepStates[index].progress > 0)
         { notifyStepProgress(element, 0); }
@@ -332,3 +334,3 @@ }
     // store most recent trigger
-    stepStates[index].direction = direction;
+    stepStates[index].direction = dir;
     stepStates[index].state = 'exit';
@@ -340,3 +342,3 @@
 
-  /*** OBSERVER - INTERSECT HANDLING ***/
+  /* OBSERVER - INTERSECT HANDLING */
   // this is good for entering while scrolling down + leaving while scrolling up
@@ -479,3 +481,3 @@ function intersectStepAbove(ref) {
 
-  /***  OBSERVER - CREATION ***/
+  /*  OBSERVER - CREATION */
   // jump into viewport
@@ -562,3 +564,3 @@ function updateViewportAboveIO() {
 
-  /*** SETUP FUNCTIONS ***/
+  /* SETUP FUNCTIONS */
 
@@ -573,3 +575,3 @@ function indexSteps() {
       state: null,
-      progress: 0
+      progress: 0,
     }); });
@@ -582,2 +584,24 @@ }
 
+  function isYScrollable(element) {
+    var style = window.getComputedStyle(element);
+    return (
+      (style.overflowY === 'scroll' || style.overflowY === 'auto') &&
+      element.scrollHeight > element.clientHeight
+    );
+  }
+
+  // recursively search the DOM for a parent container with overflowY: scroll and fixed height
+  // ends at document
+  function anyScrollableParent(element) {
+    if (element && element.nodeType === 1) {
+      // check dom elements only, stop at document
+      // if a scrollable element is found return the element
+      // if not continue to next parent
+      return isYScrollable(element)
+        ? element
+        : anyScrollableParent(element.parentNode);
+    }
+    return false; // didn't find a scrollable parent
+  }
+
   var S = {};
@@ -604,2 +628,16 @@
 
+    // ensure that no step has a scrollable parent element in the dom tree
+    // check current step for scrollable parent
+    // assume no scrollable parents to start
+    var scrollableParent = stepEl.reduce(
+      function (foundScrollable, s) { return foundScrollable || anyScrollableParent(s.parentNode); },
+      false
+    );
+    if (scrollableParent) {
+      console.error(
+        'scrollama error: step elements cannot be children of a scrollable element. Remove any css on the parent element with overflow: scroll; or overflow: auto; on elements with fixed height.',
+        scrollableParent
+      );
+    }
+
     // options
@@ -610,3 +648,2 @@ isDebug = debug;
     triggerOnce = once;
-  
 
@@ -644,4 +681,8 @@ S.offsetTrigger(offset);
     handleEnable(false);
-    Object.keys(cb).forEach(function (c) { return (cb[c] = null); });
-    Object.keys(io).forEach(function (i) { return (io[i] = null); });
+    Object.keys(cb).forEach(function (c) {
+      cb[c] = null;
+    });
+    Object.keys(io).forEach(function (i) {
+      io[i] = null;
+    });
   };
@@ -651,9 +692,18 @@
     if (x && !isNaN(x)) {
-      if (x > 1) { console.error('scrollama error: offset value is greater than 1. Fallbacks to 1.'); }
-      if (x < 0) { console.error('scrollama error: offset value is lower than 0. Fallbacks to 0.'); }
+      if (x > 1)
+        { console.error(
+          'scrollama error: offset value is greater than 1. Fallbacks to 1.'
+        ); }
+      if (x < 0)
+        { console.error(
+          'scrollama error: offset value is lower than 0. Fallbacks to 0.'
+        ); }
       offsetVal = Math.min(Math.max(0, x), 1);
       return S;
-    } else if (isNaN(x)) {
-      console.error('scrollama error: offset value is not a number. Fallbacks to 0.');
     }
+    if (isNaN(x)) {
+      console.error(
+        'scrollama error: offset value is not a number. Fallbacks to 0.'
+      );
+    }
     return offsetVal;
@@ -660,0 +710,0 @@ };

build/scrollama.min.js

@@ -1,1 +0,1 @@
-!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):e.scrollama=t()}(this,function(){"use strict";function e(e){for(var t=e.length,n=[],r=0;r<t;r+=1)n.push(e[r]);return n}function t(e){return"scrollama__debug-offset--"+e.id}function n(e){!function(e){var n=e.id,r=e.offsetVal,o=e.stepClass,i=document.createElement("div");i.setAttribute("id",t({id:n})),i.setAttribute("class","scrollama__debug-offset"),i.style.position="fixed",i.style.left="0",i.style.width="100%",i.style.height="0px",i.style.borderTop="2px dashed black",i.style.zIndex="9999";var s=document.createElement("p");s.innerText='".'+o+'" trigger: '+r,s.style.fontSize="12px",s.style.fontFamily="monospace",s.style.color="black",s.style.margin="0",s.style.padding="6px",i.appendChild(s),document.body.appendChild(i)}({id:e.id,offsetVal:e.offsetVal,stepClass:e.stepEl[0].getAttribute("class")})}function r(e){var n=e.id,r=(e.stepOffsetHeight,e.offsetMargin);e.offsetVal;!function(e){var n=e.id,r=e.offsetMargin,o=(e.offsetVal,t({id:n}));document.querySelector("#"+o).style.top=r+"px"}({id:n,offsetMargin:r})}function o(e){var t=e.id,n=e.index,r=e.state,o=function(e){return"scrollama__debug-step--"+e.id+"-"+e.i}({id:t,i:n}),i=document.querySelector("#"+o+"_above"),s=document.querySelector("#"+o+"_below"),a="enter"===r?"block":"none";i&&(i.style.display=a),s&&(s.style.display=a)}return function(){var t=["stepAbove","stepBelow","stepProgress","viewportAbove","viewportBelow"],i={stepEnter:function(){},stepExit:function(){},stepProgress:function(){}},s={},a=null,c=[],f=[],u=[],l=[],d=0,p=0,g=0,v=0,m=0,b=0,x=!1,w=!1,h=!1,y=!1,E=!1,M=!1,O="down",A=[];function I(e){return e.getBoundingClientRect().top+window.pageYOffset-(document.body.clientTop||0)}function S(e){return+e.getAttribute("data-scrollama-index")}function k(){window.pageYOffset>m?O="down":window.pageYOffset<m&&(O="up"),m=window.pageYOffset}function C(e){s[e]&&s[e].forEach(function(e){return e.disconnect()})}function q(){var e,t;g=window.innerHeight,e=document.body,t=document.documentElement,v=Math.max(e.scrollHeight,e.offsetHeight,t.clientHeight,t.scrollHeight,t.offsetHeight),p=d*g,x&&(f=c.map(function(e){return e.getBoundingClientRect().height}),u=c.map(I),w&&z()),h&&r({id:a,stepOffsetHeight:f,offsetMargin:p,offsetVal:d})}function H(e){if(e&&!w){if(!x)return console.error("scrollama error: enable() called before scroller was ready"),void(w=!1);z()}!e&&w&&t.forEach(C),w=e}function _(e,t){var n=S(e);void 0!==t&&(l[n].progress=t);var r={element:e,index:n,progress:l[n].progress};"enter"===l[n].state&&i.stepProgress(r)}function P(e,t){if("above"===t)for(var n=0;n<e;n++){var r=l[n];"enter"!==r.state&&"down"!==r.direction?(V(c[n],"down",!1),B(c[n],"down")):"enter"===r.state&&B(c[n],"down")}else if("below"===t)for(var o=l.length-1;o>e;o--){var i=l[o];"enter"===i.state&&B(c[o],"up"),"down"===i.direction&&(V(c[o],"up",!1),B(c[o],"up"))}}function V(e,t,n){void 0===n&&(n=!0);var r=S(e),s={element:e,index:r,direction:t};l[r].direction=t,l[r].state="enter",E&&n&&"down"===t&&P(r,"above"),E&&n&&"up"===t&&P(r,"below"),i.stepEnter&&!A[r]&&(i.stepEnter(s,l),h&&o({id:a,index:r,state:"enter"}),M&&(A[r]=!0)),y&&_(e)}function B(e,t){var n=S(e),r={element:e,index:n,direction:t};y&&("down"===t&&l[n].progress<1?_(e,1):"up"===t&&l[n].progress>0&&_(e,0)),l[n].direction=t,l[n].state="exit",i.stepExit(r,l),h&&o({id:a,index:n,state:"exit"})}function R(e){var t=e[0];k();var n=t.isIntersecting,r=t.boundingClientRect,o=t.target,i=r.top,s=r.bottom,a=i-p,c=s-p,f=S(o),u=l[f];n&&a<=0&&c>=0&&"down"===O&&"enter"!==u.state&&V(o,O),!n&&a>0&&"up"===O&&"enter"===u.state&&B(o,O)}function j(e){var t=e[0];k();var n=t.isIntersecting,r=t.boundingClientRect,o=t.target,i=r.top,s=r.bottom,a=i-p,c=s-p,f=S(o),u=l[f];n&&a<=0&&c>=0&&"up"===O&&"enter"!==u.state&&V(o,O),!n&&c<0&&"down"===O&&"enter"===u.state&&B(o,O)}function F(e){var t=e[0];k();var n=t.isIntersecting,r=t.target,o=S(r),i=l[o];n&&"down"===O&&"down"!==i.direction&&"enter"!==i.state&&(V(r,"down"),B(r,"down"))}function N(e){var t=e[0];k();var n=t.isIntersecting,r=t.target,o=S(r),i=l[o];n&&"up"===O&&"down"===i.direction&&"enter"!==i.state&&(V(r,"up"),B(r,"up"))}function T(e){var t=e[0];k();var n=t.isIntersecting,r=t.intersectionRatio,o=t.boundingClientRect,i=t.target,s=o.bottom;n&&s-p>=0&&_(i,+r.toFixed(3))}function Y(){s.stepProgress=c.map(function(e,t){var n=f[t]-p+"px 0px "+(-g+p)+"px 0px",r=function(e){for(var t=Math.ceil(e/b),n=[],r=1/t,o=0;o<t;o++)n.push(o*r);return n}(f[t]),o=new IntersectionObserver(T,{rootMargin:n,threshold:r});return o.observe(e),o})}function z(){t.forEach(C),s.viewportAbove=c.map(function(e,t){var n=v-u[t],r=p-g-f[t],o=new IntersectionObserver(F,{rootMargin:n+"px 0px "+r+"px 0px"});return o.observe(e),o}),s.viewportBelow=c.map(function(e,t){var n=-p-f[t],r=p-g+f[t]+v,o=new IntersectionObserver(N,{rootMargin:n+"px 0px "+r+"px 0px"});return o.observe(e),o}),s.stepAbove=c.map(function(e,t){var n=-p+f[t],r=new IntersectionObserver(R,{rootMargin:n+"px 0px "+(p-g)+"px 0px"});return r.observe(e),r}),s.stepBelow=c.map(function(e,t){var n=-p,r=p-g+f[t],o=new IntersectionObserver(j,{rootMargin:n+"px 0px "+r+"px 0px"});return o.observe(e),o}),y&&Y()}var D={};return D.setup=function(t){var r=t.step,o=t.offset;void 0===o&&(o=.5);var i=t.progress;void 0===i&&(i=!1);var s=t.threshold;void 0===s&&(s=4);var f=t.debug;void 0===f&&(f=!1);var u=t.order;void 0===u&&(u=!0);var p,g,v,m,w,O=t.once;return void 0===O&&(O=!1),g=(p="abcdefghijklmnopqrstuv").length,v=Date.now(),a=""+[0,0,0].map(function(e){return p[Math.floor(Math.random()*g)]}).join("")+v,m=r,void 0===w&&(w=document),(c="string"==typeof m?e(w.querySelectorAll(m)):m instanceof Element?e([m]):m instanceof NodeList?e(m):m instanceof Array?m:[]).length?(h=f,y=i,E=u,M=O,D.offsetTrigger(o),b=Math.max(1,+s),x=!0,h&&n({id:a,stepEl:c,offsetVal:d}),c.forEach(function(e,t){return e.setAttribute("data-scrollama-index",t)}),l=c.map(function(){return{direction:null,state:null,progress:0}}),q(),D.enable(),D):(console.error("scrollama error: no step elements"),D)},D.resize=function(){return q(),D},D.enable=function(){return H(!0),D},D.disable=function(){return H(!1),D},D.destroy=function(){H(!1),Object.keys(i).forEach(function(e){return i[e]=null}),Object.keys(s).forEach(function(e){return s[e]=null})},D.offsetTrigger=function(e){return e&&!isNaN(e)?(e>1&&console.error("scrollama error: offset value is greater than 1. Fallbacks to 1."),e<0&&console.error("scrollama error: offset value is lower than 0. Fallbacks to 0."),d=Math.min(Math.max(0,e),1),D):(isNaN(e)&&console.error("scrollama error: offset value is not a number. Fallbacks to 0."),d)},D.onStepEnter=function(e){return"function"==typeof e?i.stepEnter=e:console.error("scrollama error: onStepEnter requires a function"),D},D.onStepExit=function(e){return"function"==typeof e?i.stepExit=e:console.error("scrollama error: onStepExit requires a function"),D},D.onStepProgress=function(e){return"function"==typeof e?i.stepProgress=e:console.error("scrollama error: onStepProgress requires a function"),D},D}});
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):e.scrollama=t()}(this,function(){"use strict";function e(e){for(var t=e.length,n=[],r=0;r<t;r+=1)n.push(e[r]);return n}function t(e){return"scrollama__debug-offset--"+e.id}function n(e){!function(e){var n=e.id,r=e.offsetVal,o=e.stepClass,i=document.createElement("div");i.setAttribute("id",t({id:n})),i.setAttribute("class","scrollama__debug-offset"),i.style.position="fixed",i.style.left="0",i.style.width="100%",i.style.height="0px",i.style.borderTop="2px dashed black",i.style.zIndex="9999";var s=document.createElement("p");s.innerText='".'+o+'" trigger: '+r,s.style.fontSize="12px",s.style.fontFamily="monospace",s.style.color="black",s.style.margin="0",s.style.padding="6px",i.appendChild(s),document.body.appendChild(i)}({id:e.id,offsetVal:e.offsetVal,stepClass:e.stepEl[0].getAttribute("class")})}function r(e){var n=e.id,r=(e.stepOffsetHeight,e.offsetMargin);e.offsetVal;!function(e){var n=e.id,r=e.offsetMargin,o=(e.offsetVal,t({id:n}));document.querySelector("#"+o).style.top=r+"px"}({id:n,offsetMargin:r})}function o(e){var t=e.id,n=e.index,r=e.state,o=function(e){return"scrollama__debug-step--"+e.id+"-"+e.i}({id:t,i:n}),i=document.querySelector("#"+o+"_above"),s=document.querySelector("#"+o+"_below"),a="enter"===r?"block":"none";i&&(i.style.display=a),s&&(s.style.display=a)}return function(){var t=["stepAbove","stepBelow","stepProgress","viewportAbove","viewportBelow"],i={stepEnter:function(){},stepExit:function(){},stepProgress:function(){}},s={},a=null,c=[],l=[],f=[],u=[],d=0,p=0,v=0,g=0,m=0,b=0,w=!1,h=!1,x=!1,y=!1,E=!1,M=!1,O="down",S=[];function A(e){return e.getBoundingClientRect().top+window.pageYOffset-(document.body.clientTop||0)}function I(e){return+e.getAttribute("data-scrollama-index")}function C(){window.pageYOffset>m?O="down":window.pageYOffset<m&&(O="up"),m=window.pageYOffset}function H(e){s[e]&&s[e].forEach(function(e){return e.disconnect()})}function k(){var e,t;v=window.innerHeight,e=document.body,t=document.documentElement,g=Math.max(e.scrollHeight,e.offsetHeight,t.clientHeight,t.scrollHeight,t.offsetHeight),p=d*v,w&&(l=c.map(function(e){return e.getBoundingClientRect().height}),f=c.map(A),h&&z()),x&&r({id:a,stepOffsetHeight:l,offsetMargin:p,offsetVal:d})}function q(e){if(e&&!h){if(!w)return console.error("scrollama error: enable() called before scroller was ready"),void(h=!1);z()}!e&&h&&t.forEach(H),h=e}function _(e,t){var n=I(e);void 0!==t&&(u[n].progress=t);var r={element:e,index:n,progress:u[n].progress};"enter"===u[n].state&&i.stepProgress(r)}function N(e,t){if("above"===t)for(var n=0;n<e;n+=1){var r=u[n];"enter"!==r.state&&"down"!==r.direction?(P(c[n],"down",!1),R(c[n],"down")):"enter"===r.state&&R(c[n],"down")}else if("below"===t)for(var o=u.length-1;o>e;o-=1){var i=u[o];"enter"===i.state&&R(c[o],"up"),"down"===i.direction&&(P(c[o],"up",!1),R(c[o],"up"))}}function P(e,t,n){void 0===n&&(n=!0);var r=I(e),s={element:e,index:r,direction:t};u[r].direction=t,u[r].state="enter",E&&n&&"down"===t&&N(r,"above"),E&&n&&"up"===t&&N(r,"below"),i.stepEnter&&!S[r]&&(i.stepEnter(s,u),x&&o({id:a,index:r,state:"enter"}),M&&(S[r]=!0)),y&&_(e)}function R(e,t){var n=I(e),r={element:e,index:n,direction:t};y&&("down"===t&&u[n].progress<1?_(e,1):"up"===t&&u[n].progress>0&&_(e,0)),u[n].direction=t,u[n].state="exit",i.stepExit(r,u),x&&o({id:a,index:n,state:"exit"})}function V(e){var t=e[0];C();var n=t.isIntersecting,r=t.boundingClientRect,o=t.target,i=r.top,s=r.bottom,a=i-p,c=s-p,l=I(o),f=u[l];n&&a<=0&&c>=0&&"down"===O&&"enter"!==f.state&&P(o,O),!n&&a>0&&"up"===O&&"enter"===f.state&&R(o,O)}function B(e){var t=e[0];C();var n=t.isIntersecting,r=t.boundingClientRect,o=t.target,i=r.top,s=r.bottom,a=i-p,c=s-p,l=I(o),f=u[l];n&&a<=0&&c>=0&&"up"===O&&"enter"!==f.state&&P(o,O),!n&&c<0&&"down"===O&&"enter"===f.state&&R(o,O)}function T(e){var t=e[0];C();var n=t.isIntersecting,r=t.target,o=I(r),i=u[o];n&&"down"===O&&"down"!==i.direction&&"enter"!==i.state&&(P(r,"down"),R(r,"down"))}function Y(e){var t=e[0];C();var n=t.isIntersecting,r=t.target,o=I(r),i=u[o];n&&"up"===O&&"down"===i.direction&&"enter"!==i.state&&(P(r,"up"),R(r,"up"))}function j(e){var t=e[0];C();var n=t.isIntersecting,r=t.intersectionRatio,o=t.boundingClientRect,i=t.target,s=o.bottom;n&&s-p>=0&&_(i,+r.toFixed(3))}function F(){s.stepProgress=c.map(function(e,t){var n=l[t]-p+"px 0px "+(-v+p)+"px 0px",r=function(e){for(var t=Math.ceil(e/b),n=[],r=1/t,o=0;o<t;o+=1)n.push(o*r);return n}(l[t]),o=new IntersectionObserver(j,{rootMargin:n,threshold:r});return o.observe(e),o})}function z(){t.forEach(H),s.viewportAbove=c.map(function(e,t){var n=g-f[t],r=p-v-l[t],o=new IntersectionObserver(T,{rootMargin:n+"px 0px "+r+"px 0px"});return o.observe(e),o}),s.viewportBelow=c.map(function(e,t){var n=-p-l[t],r=p-v+l[t]+g,o=new IntersectionObserver(Y,{rootMargin:n+"px 0px "+r+"px 0px"});return o.observe(e),o}),s.stepAbove=c.map(function(e,t){var n=-p+l[t],r=new IntersectionObserver(V,{rootMargin:n+"px 0px "+(p-v)+"px 0px"});return r.observe(e),r}),s.stepBelow=c.map(function(e,t){var n=-p,r=p-v+l[t],o=new IntersectionObserver(B,{rootMargin:n+"px 0px "+r+"px 0px"});return o.observe(e),o}),y&&F()}function D(e){return!(!e||1!==e.nodeType)&&(function(e){var t=window.getComputedStyle(e);return("scroll"===t.overflowY||"auto"===t.overflowY)&&e.scrollHeight>e.clientHeight}(e)?e:D(e.parentNode))}var L={};return L.setup=function(t){var r=t.step,o=t.offset;void 0===o&&(o=.5);var i=t.progress;void 0===i&&(i=!1);var s=t.threshold;void 0===s&&(s=4);var l=t.debug;void 0===l&&(l=!1);var f=t.order;void 0===f&&(f=!0);var p,v,g,m,h,O=t.once;if(void 0===O&&(O=!1),v=(p="abcdefghijklmnopqrstuv").length,g=Date.now(),a=""+[0,0,0].map(function(e){return p[Math.floor(Math.random()*v)]}).join("")+g,m=r,void 0===h&&(h=document),!(c="string"==typeof m?e(h.querySelectorAll(m)):m instanceof Element?e([m]):m instanceof NodeList?e(m):m instanceof Array?m:[]).length)return console.error("scrollama error: no step elements"),L;var S=c.reduce(function(e,t){return e||D(t.parentNode)},!1);return S&&console.error("scrollama error: step elements cannot be children of a scrollable element. Remove any css on the parent element with overflow: scroll; or overflow: auto; on elements with fixed height.",S),x=l,y=i,E=f,M=O,L.offsetTrigger(o),b=Math.max(1,+s),w=!0,x&&n({id:a,stepEl:c,offsetVal:d}),c.forEach(function(e,t){return e.setAttribute("data-scrollama-index",t)}),u=c.map(function(){return{direction:null,state:null,progress:0}}),k(),L.enable(),L},L.resize=function(){return k(),L},L.enable=function(){return q(!0),L},L.disable=function(){return q(!1),L},L.destroy=function(){q(!1),Object.keys(i).forEach(function(e){i[e]=null}),Object.keys(s).forEach(function(e){s[e]=null})},L.offsetTrigger=function(e){return e&&!isNaN(e)?(e>1&&console.error("scrollama error: offset value is greater than 1. Fallbacks to 1."),e<0&&console.error("scrollama error: offset value is lower than 0. Fallbacks to 0."),d=Math.min(Math.max(0,e),1),L):(isNaN(e)&&console.error("scrollama error: offset value is not a number. Fallbacks to 0."),d)},L.onStepEnter=function(e){return"function"==typeof e?i.stepEnter=e:console.error("scrollama error: onStepEnter requires a function"),L},L.onStepExit=function(e){return"function"==typeof e?i.stepExit=e:console.error("scrollama error: onStepExit requires a function"),L},L.onStepProgress=function(e){return"function"==typeof e?i.stepProgress=e:console.error("scrollama error: onStepProgress requires a function"),L},L}});

docs/scrollama.min.js

@@ -1,1 +0,1 @@
-!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):e.scrollama=t()}(this,function(){"use strict";function e(e){for(var t=e.length,n=[],r=0;r<t;r+=1)n.push(e[r]);return n}function t(e){return"scrollama__debug-offset--"+e.id}function n(e){!function(e){var n=e.id,r=e.offsetVal,o=e.stepClass,i=document.createElement("div");i.setAttribute("id",t({id:n})),i.setAttribute("class","scrollama__debug-offset"),i.style.position="fixed",i.style.left="0",i.style.width="100%",i.style.height="0px",i.style.borderTop="2px dashed black",i.style.zIndex="9999";var s=document.createElement("p");s.innerText='".'+o+'" trigger: '+r,s.style.fontSize="12px",s.style.fontFamily="monospace",s.style.color="black",s.style.margin="0",s.style.padding="6px",i.appendChild(s),document.body.appendChild(i)}({id:e.id,offsetVal:e.offsetVal,stepClass:e.stepEl[0].getAttribute("class")})}function r(e){var n=e.id,r=(e.stepOffsetHeight,e.offsetMargin);e.offsetVal;!function(e){var n=e.id,r=e.offsetMargin,o=(e.offsetVal,t({id:n}));document.querySelector("#"+o).style.top=r+"px"}({id:n,offsetMargin:r})}function o(e){var t=e.id,n=e.index,r=e.state,o=function(e){return"scrollama__debug-step--"+e.id+"-"+e.i}({id:t,i:n}),i=document.querySelector("#"+o+"_above"),s=document.querySelector("#"+o+"_below"),a="enter"===r?"block":"none";i&&(i.style.display=a),s&&(s.style.display=a)}return function(){var t=["stepAbove","stepBelow","stepProgress","viewportAbove","viewportBelow"],i={stepEnter:function(){},stepExit:function(){},stepProgress:function(){}},s={},a=null,c=[],f=[],u=[],l=[],d=0,p=0,g=0,v=0,m=0,b=0,x=!1,w=!1,h=!1,y=!1,E=!1,M=!1,O="down",A=[];function I(e){return e.getBoundingClientRect().top+window.pageYOffset-(document.body.clientTop||0)}function S(e){return+e.getAttribute("data-scrollama-index")}function k(){window.pageYOffset>m?O="down":window.pageYOffset<m&&(O="up"),m=window.pageYOffset}function C(e){s[e]&&s[e].forEach(function(e){return e.disconnect()})}function q(){var e,t;g=window.innerHeight,e=document.body,t=document.documentElement,v=Math.max(e.scrollHeight,e.offsetHeight,t.clientHeight,t.scrollHeight,t.offsetHeight),p=d*g,x&&(f=c.map(function(e){return e.getBoundingClientRect().height}),u=c.map(I),w&&z()),h&&r({id:a,stepOffsetHeight:f,offsetMargin:p,offsetVal:d})}function H(e){if(e&&!w){if(!x)return console.error("scrollama error: enable() called before scroller was ready"),void(w=!1);z()}!e&&w&&t.forEach(C),w=e}function _(e,t){var n=S(e);void 0!==t&&(l[n].progress=t);var r={element:e,index:n,progress:l[n].progress};"enter"===l[n].state&&i.stepProgress(r)}function P(e,t){if("above"===t)for(var n=0;n<e;n++){var r=l[n];"enter"!==r.state&&"down"!==r.direction?(V(c[n],"down",!1),B(c[n],"down")):"enter"===r.state&&B(c[n],"down")}else if("below"===t)for(var o=l.length-1;o>e;o--){var i=l[o];"enter"===i.state&&B(c[o],"up"),"down"===i.direction&&(V(c[o],"up",!1),B(c[o],"up"))}}function V(e,t,n){void 0===n&&(n=!0);var r=S(e),s={element:e,index:r,direction:t};l[r].direction=t,l[r].state="enter",E&&n&&"down"===t&&P(r,"above"),E&&n&&"up"===t&&P(r,"below"),i.stepEnter&&!A[r]&&(i.stepEnter(s,l),h&&o({id:a,index:r,state:"enter"}),M&&(A[r]=!0)),y&&_(e)}function B(e,t){var n=S(e),r={element:e,index:n,direction:t};y&&("down"===t&&l[n].progress<1?_(e,1):"up"===t&&l[n].progress>0&&_(e,0)),l[n].direction=t,l[n].state="exit",i.stepExit(r,l),h&&o({id:a,index:n,state:"exit"})}function R(e){var t=e[0];k();var n=t.isIntersecting,r=t.boundingClientRect,o=t.target,i=r.top,s=r.bottom,a=i-p,c=s-p,f=S(o),u=l[f];n&&a<=0&&c>=0&&"down"===O&&"enter"!==u.state&&V(o,O),!n&&a>0&&"up"===O&&"enter"===u.state&&B(o,O)}function j(e){var t=e[0];k();var n=t.isIntersecting,r=t.boundingClientRect,o=t.target,i=r.top,s=r.bottom,a=i-p,c=s-p,f=S(o),u=l[f];n&&a<=0&&c>=0&&"up"===O&&"enter"!==u.state&&V(o,O),!n&&c<0&&"down"===O&&"enter"===u.state&&B(o,O)}function F(e){var t=e[0];k();var n=t.isIntersecting,r=t.target,o=S(r),i=l[o];n&&"down"===O&&"down"!==i.direction&&"enter"!==i.state&&(V(r,"down"),B(r,"down"))}function N(e){var t=e[0];k();var n=t.isIntersecting,r=t.target,o=S(r),i=l[o];n&&"up"===O&&"down"===i.direction&&"enter"!==i.state&&(V(r,"up"),B(r,"up"))}function T(e){var t=e[0];k();var n=t.isIntersecting,r=t.intersectionRatio,o=t.boundingClientRect,i=t.target,s=o.bottom;n&&s-p>=0&&_(i,+r.toFixed(3))}function Y(){s.stepProgress=c.map(function(e,t){var n=f[t]-p+"px 0px "+(-g+p)+"px 0px",r=function(e){for(var t=Math.ceil(e/b),n=[],r=1/t,o=0;o<t;o++)n.push(o*r);return n}(f[t]),o=new IntersectionObserver(T,{rootMargin:n,threshold:r});return o.observe(e),o})}function z(){t.forEach(C),s.viewportAbove=c.map(function(e,t){var n=v-u[t],r=p-g-f[t],o=new IntersectionObserver(F,{rootMargin:n+"px 0px "+r+"px 0px"});return o.observe(e),o}),s.viewportBelow=c.map(function(e,t){var n=-p-f[t],r=p-g+f[t]+v,o=new IntersectionObserver(N,{rootMargin:n+"px 0px "+r+"px 0px"});return o.observe(e),o}),s.stepAbove=c.map(function(e,t){var n=-p+f[t],r=new IntersectionObserver(R,{rootMargin:n+"px 0px "+(p-g)+"px 0px"});return r.observe(e),r}),s.stepBelow=c.map(function(e,t){var n=-p,r=p-g+f[t],o=new IntersectionObserver(j,{rootMargin:n+"px 0px "+r+"px 0px"});return o.observe(e),o}),y&&Y()}var D={};return D.setup=function(t){var r=t.step,o=t.offset;void 0===o&&(o=.5);var i=t.progress;void 0===i&&(i=!1);var s=t.threshold;void 0===s&&(s=4);var f=t.debug;void 0===f&&(f=!1);var u=t.order;void 0===u&&(u=!0);var p,g,v,m,w,O=t.once;return void 0===O&&(O=!1),g=(p="abcdefghijklmnopqrstuv").length,v=Date.now(),a=""+[0,0,0].map(function(e){return p[Math.floor(Math.random()*g)]}).join("")+v,m=r,void 0===w&&(w=document),(c="string"==typeof m?e(w.querySelectorAll(m)):m instanceof Element?e([m]):m instanceof NodeList?e(m):m instanceof Array?m:[]).length?(h=f,y=i,E=u,M=O,D.offsetTrigger(o),b=Math.max(1,+s),x=!0,h&&n({id:a,stepEl:c,offsetVal:d}),c.forEach(function(e,t){return e.setAttribute("data-scrollama-index",t)}),l=c.map(function(){return{direction:null,state:null,progress:0}}),q(),D.enable(),D):(console.error("scrollama error: no step elements"),D)},D.resize=function(){return q(),D},D.enable=function(){return H(!0),D},D.disable=function(){return H(!1),D},D.destroy=function(){H(!1),Object.keys(i).forEach(function(e){return i[e]=null}),Object.keys(s).forEach(function(e){return s[e]=null})},D.offsetTrigger=function(e){return e&&!isNaN(e)?(e>1&&console.error("scrollama error: offset value is greater than 1. Fallbacks to 1."),e<0&&console.error("scrollama error: offset value is lower than 0. Fallbacks to 0."),d=Math.min(Math.max(0,e),1),D):(isNaN(e)&&console.error("scrollama error: offset value is not a number. Fallbacks to 0."),d)},D.onStepEnter=function(e){return"function"==typeof e?i.stepEnter=e:console.error("scrollama error: onStepEnter requires a function"),D},D.onStepExit=function(e){return"function"==typeof e?i.stepExit=e:console.error("scrollama error: onStepExit requires a function"),D},D.onStepProgress=function(e){return"function"==typeof e?i.stepProgress=e:console.error("scrollama error: onStepProgress requires a function"),D},D}});
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):e.scrollama=t()}(this,function(){"use strict";function e(e){for(var t=e.length,n=[],r=0;r<t;r+=1)n.push(e[r]);return n}function t(e){return"scrollama__debug-offset--"+e.id}function n(e){!function(e){var n=e.id,r=e.offsetVal,o=e.stepClass,i=document.createElement("div");i.setAttribute("id",t({id:n})),i.setAttribute("class","scrollama__debug-offset"),i.style.position="fixed",i.style.left="0",i.style.width="100%",i.style.height="0px",i.style.borderTop="2px dashed black",i.style.zIndex="9999";var s=document.createElement("p");s.innerText='".'+o+'" trigger: '+r,s.style.fontSize="12px",s.style.fontFamily="monospace",s.style.color="black",s.style.margin="0",s.style.padding="6px",i.appendChild(s),document.body.appendChild(i)}({id:e.id,offsetVal:e.offsetVal,stepClass:e.stepEl[0].getAttribute("class")})}function r(e){var n=e.id,r=(e.stepOffsetHeight,e.offsetMargin);e.offsetVal;!function(e){var n=e.id,r=e.offsetMargin,o=(e.offsetVal,t({id:n}));document.querySelector("#"+o).style.top=r+"px"}({id:n,offsetMargin:r})}function o(e){var t=e.id,n=e.index,r=e.state,o=function(e){return"scrollama__debug-step--"+e.id+"-"+e.i}({id:t,i:n}),i=document.querySelector("#"+o+"_above"),s=document.querySelector("#"+o+"_below"),a="enter"===r?"block":"none";i&&(i.style.display=a),s&&(s.style.display=a)}return function(){var t=["stepAbove","stepBelow","stepProgress","viewportAbove","viewportBelow"],i={stepEnter:function(){},stepExit:function(){},stepProgress:function(){}},s={},a=null,c=[],l=[],f=[],u=[],d=0,p=0,v=0,g=0,m=0,b=0,w=!1,h=!1,x=!1,y=!1,E=!1,M=!1,O="down",S=[];function A(e){return e.getBoundingClientRect().top+window.pageYOffset-(document.body.clientTop||0)}function I(e){return+e.getAttribute("data-scrollama-index")}function C(){window.pageYOffset>m?O="down":window.pageYOffset<m&&(O="up"),m=window.pageYOffset}function H(e){s[e]&&s[e].forEach(function(e){return e.disconnect()})}function k(){var e,t;v=window.innerHeight,e=document.body,t=document.documentElement,g=Math.max(e.scrollHeight,e.offsetHeight,t.clientHeight,t.scrollHeight,t.offsetHeight),p=d*v,w&&(l=c.map(function(e){return e.getBoundingClientRect().height}),f=c.map(A),h&&z()),x&&r({id:a,stepOffsetHeight:l,offsetMargin:p,offsetVal:d})}function q(e){if(e&&!h){if(!w)return console.error("scrollama error: enable() called before scroller was ready"),void(h=!1);z()}!e&&h&&t.forEach(H),h=e}function _(e,t){var n=I(e);void 0!==t&&(u[n].progress=t);var r={element:e,index:n,progress:u[n].progress};"enter"===u[n].state&&i.stepProgress(r)}function N(e,t){if("above"===t)for(var n=0;n<e;n+=1){var r=u[n];"enter"!==r.state&&"down"!==r.direction?(P(c[n],"down",!1),R(c[n],"down")):"enter"===r.state&&R(c[n],"down")}else if("below"===t)for(var o=u.length-1;o>e;o-=1){var i=u[o];"enter"===i.state&&R(c[o],"up"),"down"===i.direction&&(P(c[o],"up",!1),R(c[o],"up"))}}function P(e,t,n){void 0===n&&(n=!0);var r=I(e),s={element:e,index:r,direction:t};u[r].direction=t,u[r].state="enter",E&&n&&"down"===t&&N(r,"above"),E&&n&&"up"===t&&N(r,"below"),i.stepEnter&&!S[r]&&(i.stepEnter(s,u),x&&o({id:a,index:r,state:"enter"}),M&&(S[r]=!0)),y&&_(e)}function R(e,t){var n=I(e),r={element:e,index:n,direction:t};y&&("down"===t&&u[n].progress<1?_(e,1):"up"===t&&u[n].progress>0&&_(e,0)),u[n].direction=t,u[n].state="exit",i.stepExit(r,u),x&&o({id:a,index:n,state:"exit"})}function V(e){var t=e[0];C();var n=t.isIntersecting,r=t.boundingClientRect,o=t.target,i=r.top,s=r.bottom,a=i-p,c=s-p,l=I(o),f=u[l];n&&a<=0&&c>=0&&"down"===O&&"enter"!==f.state&&P(o,O),!n&&a>0&&"up"===O&&"enter"===f.state&&R(o,O)}function B(e){var t=e[0];C();var n=t.isIntersecting,r=t.boundingClientRect,o=t.target,i=r.top,s=r.bottom,a=i-p,c=s-p,l=I(o),f=u[l];n&&a<=0&&c>=0&&"up"===O&&"enter"!==f.state&&P(o,O),!n&&c<0&&"down"===O&&"enter"===f.state&&R(o,O)}function T(e){var t=e[0];C();var n=t.isIntersecting,r=t.target,o=I(r),i=u[o];n&&"down"===O&&"down"!==i.direction&&"enter"!==i.state&&(P(r,"down"),R(r,"down"))}function Y(e){var t=e[0];C();var n=t.isIntersecting,r=t.target,o=I(r),i=u[o];n&&"up"===O&&"down"===i.direction&&"enter"!==i.state&&(P(r,"up"),R(r,"up"))}function j(e){var t=e[0];C();var n=t.isIntersecting,r=t.intersectionRatio,o=t.boundingClientRect,i=t.target,s=o.bottom;n&&s-p>=0&&_(i,+r.toFixed(3))}function F(){s.stepProgress=c.map(function(e,t){var n=l[t]-p+"px 0px "+(-v+p)+"px 0px",r=function(e){for(var t=Math.ceil(e/b),n=[],r=1/t,o=0;o<t;o+=1)n.push(o*r);return n}(l[t]),o=new IntersectionObserver(j,{rootMargin:n,threshold:r});return o.observe(e),o})}function z(){t.forEach(H),s.viewportAbove=c.map(function(e,t){var n=g-f[t],r=p-v-l[t],o=new IntersectionObserver(T,{rootMargin:n+"px 0px "+r+"px 0px"});return o.observe(e),o}),s.viewportBelow=c.map(function(e,t){var n=-p-l[t],r=p-v+l[t]+g,o=new IntersectionObserver(Y,{rootMargin:n+"px 0px "+r+"px 0px"});return o.observe(e),o}),s.stepAbove=c.map(function(e,t){var n=-p+l[t],r=new IntersectionObserver(V,{rootMargin:n+"px 0px "+(p-v)+"px 0px"});return r.observe(e),r}),s.stepBelow=c.map(function(e,t){var n=-p,r=p-v+l[t],o=new IntersectionObserver(B,{rootMargin:n+"px 0px "+r+"px 0px"});return o.observe(e),o}),y&&F()}function D(e){return!(!e||1!==e.nodeType)&&(function(e){var t=window.getComputedStyle(e);return("scroll"===t.overflowY||"auto"===t.overflowY)&&e.scrollHeight>e.clientHeight}(e)?e:D(e.parentNode))}var L={};return L.setup=function(t){var r=t.step,o=t.offset;void 0===o&&(o=.5);var i=t.progress;void 0===i&&(i=!1);var s=t.threshold;void 0===s&&(s=4);var l=t.debug;void 0===l&&(l=!1);var f=t.order;void 0===f&&(f=!0);var p,v,g,m,h,O=t.once;if(void 0===O&&(O=!1),v=(p="abcdefghijklmnopqrstuv").length,g=Date.now(),a=""+[0,0,0].map(function(e){return p[Math.floor(Math.random()*v)]}).join("")+g,m=r,void 0===h&&(h=document),!(c="string"==typeof m?e(h.querySelectorAll(m)):m instanceof Element?e([m]):m instanceof NodeList?e(m):m instanceof Array?m:[]).length)return console.error("scrollama error: no step elements"),L;var S=c.reduce(function(e,t){return e||D(t.parentNode)},!1);return S&&console.error("scrollama error: step elements cannot be children of a scrollable element. Remove any css on the parent element with overflow: scroll; or overflow: auto; on elements with fixed height.",S),x=l,y=i,E=f,M=O,L.offsetTrigger(o),b=Math.max(1,+s),w=!0,x&&n({id:a,stepEl:c,offsetVal:d}),c.forEach(function(e,t){return e.setAttribute("data-scrollama-index",t)}),u=c.map(function(){return{direction:null,state:null,progress:0}}),k(),L.enable(),L},L.resize=function(){return k(),L},L.enable=function(){return q(!0),L},L.disable=function(){return q(!1),L},L.destroy=function(){q(!1),Object.keys(i).forEach(function(e){i[e]=null}),Object.keys(s).forEach(function(e){s[e]=null})},L.offsetTrigger=function(e){return e&&!isNaN(e)?(e>1&&console.error("scrollama error: offset value is greater than 1. Fallbacks to 1."),e<0&&console.error("scrollama error: offset value is lower than 0. Fallbacks to 0."),d=Math.min(Math.max(0,e),1),L):(isNaN(e)&&console.error("scrollama error: offset value is not a number. Fallbacks to 0."),d)},L.onStepEnter=function(e){return"function"==typeof e?i.stepEnter=e:console.error("scrollama error: onStepEnter requires a function"),L},L.onStepExit=function(e){return"function"==typeof e?i.stepExit=e:console.error("scrollama error: onStepExit requires a function"),L},L.onStepProgress=function(e){return"function"==typeof e?i.stepProgress=e:console.error("scrollama error: onStepProgress requires a function"),L},L}});

package.json

 {
-  "name": "scrollama",
-  "version": "2.1.2",
-  "description": "Lightweight scrollytelling library using IntersectionObserver",
-  "main": "build/scrollama.js",
-  "browser": "build/scrollama.js",
-  "scripts": {
-    "dev": "cross-env NODE_ENV=development rollup -w -c",
-    "build": "npm run pretest && cross-env NODE_ENV=production rollup -c && npm run docs",
-    "pretest": "cross-env NODE_ENV=development rollup -c",
-    "docs": "cp build/scrollama.min.js docs"
-  },
-  "module": "index",
-  "jsnext:main": "index",
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/russellgoldenberg/scrollama.git"
-  },
-  "homepage": "https://github.com/russellgoldenberg/scrollama#readme",
-  "keywords": [
-    "scrollytelling",
-    "scroll",
-    "scroll-driven",
-    "step",
-    "interactive",
-    "graphic",
-    "observer",
-    "IntersectionObserver",
-    "enter",
-    "exit",
-    "view",
-    "trigger"
-  ],
-  "author": "Russell Goldenberg (@russellgoldenberg)",
-  "license": "MIT",
-  "devDependencies": {
-    "cross-env": "^5.1.3",
-    "rollup": "^0.55.3",
-    "rollup-plugin-buble": "^0.18.0",
-    "rollup-plugin-commonjs": "^8.3.0",
-    "rollup-plugin-filesize": "^1.5.0",
-    "rollup-plugin-node-resolve": "^3.0.2",
-    "rollup-plugin-uglify": "^3.0.0"
-  }
+	"name": "scrollama",
+	"version": "2.1.3",
+	"description": "Lightweight scrollytelling library using IntersectionObserver",
+	"main": "build/scrollama.js",
+	"browser": "build/scrollama.js",
+	"scripts": {
+		"dev": "cross-env NODE_ENV=development rollup -w -c",
+		"build": "npm run pretest && cross-env NODE_ENV=production rollup -c && npm run docs",
+		"pretest": "cross-env NODE_ENV=development rollup -c",
+		"docs": "cp build/scrollama.min.js docs"
+	},
+	"module": "index",
+	"jsnext:main": "index",
+	"repository": {
+		"type": "git",
+		"url": "https://github.com/russellgoldenberg/scrollama.git"
+	},
+	"homepage": "https://github.com/russellgoldenberg/scrollama#readme",
+	"keywords": [
+		"scrollytelling",
+		"scroll",
+		"scroll-driven",
+		"step",
+		"interactive",
+		"graphic",
+		"observer",
+		"IntersectionObserver",
+		"enter",
+		"exit",
+		"view",
+		"trigger"
+	],
+	"author": "Russell Goldenberg (@russellgoldenberg)",
+	"license": "MIT",
+	"devDependencies": {
+		"babel-eslint": "10.0.3",
+		"cross-env": "^5.1.3",
+		"eslint": "6.6.0",
+		"eslint-config-airbnb-base": "14.0.0",
+		"eslint-config-prettier": "6.6.0",
+		"eslint-plugin-import": "2.18.2",
+		"eslint-plugin-prettier": "3.1.1",
+		"prettier": "1.19.1",
+		"rollup": "^0.55.3",
+		"rollup-plugin-buble": "^0.18.0",
+		"rollup-plugin-commonjs": "^8.3.0",
+		"rollup-plugin-filesize": "^1.5.0",
+		"rollup-plugin-node-resolve": "^3.0.2",
+		"rollup-plugin-uglify": "^3.0.0"
+	}
 }

README.md

@@ -43,3 +43,3 @@ ###### scrollama.js
 
-**Note: As of version 1.4.0, the IntersectionObserver polyfill has been removed from the build. You must include it yourself for cross-browser support.**
+**Note: As of version 1.4.0, the IntersectionObserver polyfill has been removed from the build. You must include it yourself for cross-browser support.** Check [here](https://caniuse.com/#feat=intersectionobserver) to see if you need to include the polyfill.
 
@@ -221,2 +221,3 @@ Old school (exposes the `scrollama` global):
 * [andysongs](https://github.com/andysongs)
+* [Ryshackleton](https://github.com/Ryshackleton)
 
@@ -223,0 +224,0 @@ ### License

src/init.js

@@ -10,3 +10,3 @@ import { selectAll } from './dom';
     'viewportAbove',
-    'viewportBelow'
+    'viewportBelow',
   ];
@@ -17,3 +17,3 @@
     stepExit: () => {},
-    stepProgress: () => {}
+    stepProgress: () => {},
   };
@@ -32,4 +32,4 @@ const io = {};
   let pageH = 0;
-	let previousYOffset = 0;
-	let progressThreshold = 0;
+  let previousYOffset = 0;
+  let progressThreshold = 0;
 
@@ -48,3 +48,3 @@ let isReady = false;
 
-  /*** HELPERS ***/
+  /* HELPERS */
   function generateInstanceID() {
@@ -66,3 +66,3 @@ const a = 'abcdefghijklmnopqrstuv';
   function getPageHeight() {
-    const body = document.body;
+    const { body } = document;
     const html = document.documentElement;
@@ -83,7 +83,7 @@
 
-	function updateDirection() {
-		if (window.pageYOffset > previousYOffset) direction = 'down';
-		else if (window.pageYOffset < previousYOffset) direction = 'up';
-		previousYOffset = window.pageYOffset;
-	}
+  function updateDirection() {
+    if (window.pageYOffset > previousYOffset) direction = 'down';
+    else if (window.pageYOffset < previousYOffset) direction = 'up';
+    previousYOffset = window.pageYOffset;
+  }
 
@@ -110,7 +110,12 @@ function disconnectObserver(name) {
   function handleEnable(enable) {
-    if (enable && !isEnabled) { // enable a disabled scroller
-      if (isReady) { // enable a ready scroller
+    if (enable && !isEnabled) {
+      // enable a disabled scroller
+      if (isReady) {
+        // enable a ready scroller
         updateIO();
-      } else { // can't enable an unready scroller
-        console.error('scrollama error: enable() called before scroller was ready');
+      } else {
+        // can't enable an unready scroller
+        console.error(
+          'scrollama error: enable() called before scroller was ready'
+        );
         isEnabled = false;
@@ -120,3 +125,4 @@ return; // all is not well, don't set the requested state
     }
-    if (!enable && isEnabled) { // disable an enabled scroller
+    if (!enable && isEnabled) {
+      // disable an enabled scroller
       OBSERVER_NAMES.forEach(disconnectObserver);
@@ -131,3 +137,3 @@ }
     const ratio = 1 / count;
-    for (let i = 0; i < count; i++) {
+    for (let i = 0; i < count; i += 1) {
       t.push(i * ratio);
@@ -138,4 +144,3 @@ }
 
-  /*** NOTIFY CALLBACKS ***/
-
+  /* NOTIFY CALLBACKS */
   function notifyStepProgress(element, progress) {
@@ -152,3 +157,3 @@ const index = getIndex(element);
       // check if steps above/below were skipped and should be notified first
-      for (let i = 0; i < index; i++) {
+      for (let i = 0; i < index; i += 1) {
         const ss = stepStates[i];
@@ -165,3 +170,3 @@ if (ss.state !== 'enter' && ss.direction !== 'down') {
     } else if (location === 'below') {
-      for (let i = stepStates.length - 1; i > index; i--) {
+      for (let i = stepStates.length - 1; i > index; i -= 1) {
         const ss = stepStates[i];
@@ -179,14 +184,12 @@ if (ss.state === 'enter') {
 
-  function notifyStepEnter(element, direction, check = true) {
+  function notifyStepEnter(element, dir, check = true) {
     const index = getIndex(element);
-    const resp = { element, index, direction };
+    const resp = { element, index, direction: dir };
 
     // store most recent trigger
-    stepStates[index].direction = direction;
+    stepStates[index].direction = dir;
     stepStates[index].state = 'enter';
-    if (preserveOrder && check && direction === 'down')
-      notifyOthers(index, 'above');
+    if (preserveOrder && check && dir === 'down') notifyOthers(index, 'above');
 
-    if (preserveOrder && check && direction === 'up')
-      notifyOthers(index, 'below');
+    if (preserveOrder && check && dir === 'up') notifyOthers(index, 'below');
 
@@ -202,10 +205,10 @@ if (cb.stepEnter && !exclude[index]) {
 
-  function notifyStepExit(element, direction) {
+  function notifyStepExit(element, dir) {
     const index = getIndex(element);
-    const resp = { element, index, direction };
+    const resp = { element, index, direction: dir };
 
     if (progressMode) {
-      if (direction === 'down' && stepStates[index].progress < 1)
+      if (dir === 'down' && stepStates[index].progress < 1)
         notifyStepProgress(element, 1);
-      else if (direction === 'up' && stepStates[index].progress > 0)
+      else if (dir === 'up' && stepStates[index].progress > 0)
         notifyStepProgress(element, 0);
@@ -215,3 +218,3 @@ }
     // store most recent trigger
-    stepStates[index].direction = direction;
+    stepStates[index].direction = dir;
     stepStates[index].state = 'exit';
@@ -223,3 +226,3 @@
 
-  /*** OBSERVER - INTERSECT HANDLING ***/
+  /* OBSERVER - INTERSECT HANDLING */
   // this is good for entering while scrolling down + leaving while scrolling up
@@ -337,3 +340,3 @@ function intersectStepAbove([entry]) {
       boundingClientRect,
-      target
+      target,
     } = entry;
@@ -347,3 +350,3 @@ const { bottom } = boundingClientRect;
 
-  /***  OBSERVER - CREATION ***/
+  /*  OBSERVER - CREATION */
   // jump into viewport
@@ -430,3 +433,3 @@ function updateViewportAboveIO() {
 
-  /*** SETUP FUNCTIONS ***/
+  /* SETUP FUNCTIONS */
 
@@ -441,3 +444,3 @@ function indexSteps() {
       state: null,
-      progress: 0
+      progress: 0,
     }));
@@ -450,2 +453,24 @@ }
 
+  function isYScrollable(element) {
+    const style = window.getComputedStyle(element);
+    return (
+      (style.overflowY === 'scroll' || style.overflowY === 'auto') &&
+      element.scrollHeight > element.clientHeight
+    );
+  }
+
+  // recursively search the DOM for a parent container with overflowY: scroll and fixed height
+  // ends at document
+  function anyScrollableParent(element) {
+    if (element && element.nodeType === 1) {
+      // check dom elements only, stop at document
+      // if a scrollable element is found return the element
+      // if not continue to next parent
+      return isYScrollable(element)
+        ? element
+        : anyScrollableParent(element.parentNode);
+    }
+    return false; // didn't find a scrollable parent
+  }
+
   const S = {};
@@ -460,3 +485,3 @@
     order = true,
-    once = false
+    once = false,
   }) => {
@@ -473,2 +498,17 @@ // create id unique to this scrollama instance
 
+    // ensure that no step has a scrollable parent element in the dom tree
+    // check current step for scrollable parent
+    // assume no scrollable parents to start
+    const scrollableParent = stepEl.reduce(
+      (foundScrollable, s) =>
+        foundScrollable || anyScrollableParent(s.parentNode),
+      false
+    );
+    if (scrollableParent) {
+      console.error(
+        'scrollama error: step elements cannot be children of a scrollable element. Remove any css on the parent element with overflow: scroll; or overflow: auto; on elements with fixed height.',
+        scrollableParent
+      );
+    }
+
     // options
@@ -479,3 +519,2 @@ isDebug = debug;
     triggerOnce = once;
-  
 
@@ -513,4 +552,8 @@ S.offsetTrigger(offset);
     handleEnable(false);
-    Object.keys(cb).forEach(c => (cb[c] = null));
-    Object.keys(io).forEach(i => (io[i] = null));
+    Object.keys(cb).forEach(c => {
+      cb[c] = null;
+    });
+    Object.keys(io).forEach(i => {
+      io[i] = null;
+    });
   };
@@ -520,9 +563,18 @@
     if (x && !isNaN(x)) {
-      if (x > 1) console.error('scrollama error: offset value is greater than 1. Fallbacks to 1.');
-      if (x < 0) console.error('scrollama error: offset value is lower than 0. Fallbacks to 0.');
+      if (x > 1)
+        console.error(
+          'scrollama error: offset value is greater than 1. Fallbacks to 1.'
+        );
+      if (x < 0)
+        console.error(
+          'scrollama error: offset value is lower than 0. Fallbacks to 0.'
+        );
       offsetVal = Math.min(Math.max(0, x), 1);
       return S;
-    } else if (isNaN(x)) {
-      console.error('scrollama error: offset value is not a number. Fallbacks to 0.');
     }
+    if (isNaN(x)) {
+      console.error(
+        'scrollama error: offset value is not a number. Fallbacks to 0.'
+      );
+    }
     return offsetVal;
@@ -529,0 +581,0 @@ };

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

374642

increased by2.92%

Number of package files

28

increased by7.69%

Lines of code

1399

increased by7.86%

Number of lines in readme file

244

increased by0.41%

Worsened metrics

Dev dependency count

14

increased by100%

No dependency changes