Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

scrollama

Package Overview
Dependencies
Maintainers
1
Versions
50
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

scrollama - npm Package Compare versions

Comparing version 3.0.4 to 3.1.0

dev/scroll-parent.html

25

build/scrollama.js

@@ -120,12 +120,14 @@ (function (global, factory) {

function onScroll() {
if (currentScrollY === window.pageYOffset) return;
currentScrollY = window.pageYOffset;
if (currentScrollY > comparisonScrollY) direction = "down";
else if (currentScrollY < comparisonScrollY) direction = "up";
comparisonScrollY = currentScrollY;
function onScroll(container) {
const scrollTop = container ? container.scrollTop : window.pageYOffset;
if (currentScrollY === scrollTop) return;
currentScrollY = scrollTop;
if (currentScrollY > comparisonScrollY) direction = "down";
else if (currentScrollY < comparisonScrollY) direction = "up";
comparisonScrollY = currentScrollY;
}
function setupScroll() {
document.addEventListener("scroll", onScroll);
document.addEventListener("scroll", onScroll);
}

@@ -139,2 +141,3 @@

let globalOffset;
let containerElement;

@@ -226,3 +229,3 @@ let progressThreshold = 0;

function intersectStep([entry]) {
onScroll();
onScroll(containerElement);

@@ -315,2 +318,4 @@ const { isIntersecting, target } = entry;

/* SETUP */
setupScroll();
const S = {};

@@ -326,2 +331,3 @@

debug = false,
container = undefined
}) => {

@@ -350,2 +356,3 @@ steps = selectAll(step, parent).map((node, index) => ({

globalOffset = parseOffset(offset);
containerElement = container;

@@ -406,6 +413,4 @@ reset();

setupScroll();
return scrollama;
})));

2

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=e||self).scrollama=t()}(this,function(){"use strict";function $({id:e,step:t,marginTop:n}){var{index:o,height:t}=t,o=`scrollama__debug-step--${e}-${o}`;let r=document.querySelector(`.${o}`);r=r||function(e){const t=document.createElement("div");t.className=`scrollama__debug-step ${e}`,t.style.position="fixed",t.style.left="0",t.style.width="100%",t.style.zIndex="9999",t.style.borderTop="2px solid black",t.style.borderBottom="2px solid black";const n=document.createElement("p");return n.style.position="absolute",n.style.left="0",n.style.height="1px",n.style.width="100%",n.style.borderTop="1px dashed black",t.appendChild(n),document.body.appendChild(t),t}(o),r.style.top=`${-1*n}px`,r.style.height=`${t}px`,r.querySelector("p").style.top=`${t/2}px`}function S(e){console.error(`scrollama error: ${e}`)}function k(e){return+e.getAttribute("data-scrollama-index")}function M(e){if("string"==typeof e&&0<e.indexOf("px")){var t=+e.replace("px","");return isNaN(t)?(err("offset value must be in 'px' format. Fallback to 0.5."),{format:"percent",value:.5}):{format:"pixels",value:t}}return"number"!=typeof e&&isNaN(+e)?null:(1<e&&err("offset value is greater than 1. Fallback to 1."),e<0&&err("offset value is lower than 0. Fallback to 0."),{format:"percent",value:Math.min(Math.max(0,e),1)})}let e=0,t=0,O;function q(){e!==window.pageYOffset&&(e=window.pageYOffset,e>t?O="down":e<t&&(O="up"),t=e)}return document.addEventListener("scroll",q),function(){let r={},s=function(){var t="abcdefghijklmnopqrstuvwxyz",e=Date.now();const n=[];for(let e=0;e<6;e+=1){var o=t[Math.floor(Math.random()*t.length)];n.push(o)}return`${n.join("")}${e}`}(),a=[],c,f=0,t=!1,l=!1,p=!1,u=!1,o=[];function d(){r={stepEnter:()=>{},stepExit:()=>{},stepProgress:()=>{}},o=[]}function h(e){e&&!t&&w(),!e&&t&&v(),t=e}function i(e,t){var n=k(e);const o=a[n];void 0!==t&&(o.progress=t);t={element:e,index:n,progress:t,direction:O};"enter"===o.state&&r.stepProgress(t)}function n([e]){var t=k(e.target);const n=a[t];e=e.target.offsetHeight;e!==n.height&&(n.height=e,x(n),y(n),b(n))}function g([e]){q();var{isIntersecting:t,target:e}=e;(t?function(e){var t=k(e);const n=a[t];e={element:e,index:t,direction:O},n.direction=O,n.state="enter",o[t]||r.stepEnter(e),u&&(o[t]=!0)}:function(e){var t=k(e);const n=a[t];n.state&&(t={element:e,index:t,direction:O},l&&("down"===O&&n.progress<1?i(e,1):"up"===O&&0<n.progress&&i(e,0)),n.direction=O,n.state="exit",r.stepExit(t))})(e)}function m([e]){var t=k(e.target),n=a[t],{isIntersecting:o,intersectionRatio:t,target:e}=e;o&&"enter"===n.state&&i(e,t)}function x({observers:t}){Object.keys(t).map(e=>{t[e].disconnect()})}function v(){a.forEach(x)}function b(e){const t=new ResizeObserver(n);t.observe(e.node),e.observers.resize=t}function y(e){var t=window.innerHeight,n=e.offset||c,o="pixels"===n.format?1:t,n=n.value*o,o=e.height/2-n,n=e.height/2-(t-n);const r=new IntersectionObserver(g,{rootMargin:`${o}px 0px ${n}px 0px`,threshold:.5});r.observe(e.node),e.observers.step=r,p&&$({id:s,step:e,marginTop:o,marginBottom:n})}function e(e){var t=window.innerHeight,n=e.offset||c,o="pixels"===n.format?1:t,o=n.value*o,o=`${-o+e.height}px 0px ${o-t}px 0px`,t=function(e,t){var n=Math.ceil(e/t);const o=[];var r=1/n;for(let e=0;e<n+1;e+=1)o.push(e*r);return o}(e.height,f);const r=new IntersectionObserver(m,{rootMargin:o,threshold:t});r.observe(e.node),e.observers.progress=r}function w(){v(),a.forEach(b),a.forEach(y),l&&a.forEach(e)}const E={};return E.setup=({step:e,parent:t,offset:n=.5,threshold:o=4,progress:r=!1,once:s=!1,debug:i=!1})=>{return a=([e,t=document]=[e,t],("string"==typeof e?Array.from(t.querySelectorAll(e)):e instanceof Element?[e]:e instanceof NodeList?Array.from(e):e instanceof Array?e:[]).map((e,t)=>({index:t,direction:void 0,height:e.offsetHeight,node:e,observers:{},offset:M(e.dataset.offset),top:function(e){var{top:e}=e.getBoundingClientRect();return e+window.pageYOffset-(document.body.clientTop||0)}(e),progress:0,state:void 0}))),a.length?(l=r,u=s,p=i,f=Math.max(1,+o),c=M(n),d(),a.forEach(e=>e.node.setAttribute("data-scrollama-index",e.index)),h(!0)):S("no step elements"),E},E.enable=()=>(h(!0),E),E.disable=()=>(h(!1),E),E.destroy=()=>(h(!1),d(),E),E.resize=()=>(w(),E),E.offset=e=>null==e?c.value:(c=M(e),w(),E),E.onStepEnter=e=>("function"==typeof e?r.stepEnter=e:S("onStepEnter requires a function"),E),E.onStepExit=e=>("function"==typeof e?r.stepExit=e:S("onStepExit requires a function"),E),E.onStepProgress=e=>("function"==typeof e?r.stepProgress=e:S("onStepProgress requires a function"),E),E}});
!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):(e=e||self).scrollama=t()}(this,function(){"use strict";function S({id:e,step:t,marginTop:n}){var{index:o,height:t}=t,o=`scrollama__debug-step--${e}-${o}`;let r=document.querySelector(`.${o}`);r=r||function(e){const t=document.createElement("div");t.className=`scrollama__debug-step ${e}`,t.style.position="fixed",t.style.left="0",t.style.width="100%",t.style.zIndex="9999",t.style.borderTop="2px solid black",t.style.borderBottom="2px solid black";const n=document.createElement("p");return n.style.position="absolute",n.style.left="0",n.style.height="1px",n.style.width="100%",n.style.borderTop="1px dashed black",t.appendChild(n),document.body.appendChild(t),t}(o),r.style.top=`${-1*n}px`,r.style.height=`${t}px`,r.querySelector("p").style.top=`${t/2}px`}function k(e){console.error(`scrollama error: ${e}`)}function M(e){return+e.getAttribute("data-scrollama-index")}function q(e){if("string"==typeof e&&0<e.indexOf("px")){var t=+e.replace("px","");return isNaN(t)?(err("offset value must be in 'px' format. Fallback to 0.5."),{format:"percent",value:.5}):{format:"pixels",value:t}}return"number"!=typeof e&&isNaN(+e)?null:(1<e&&err("offset value is greater than 1. Fallback to 1."),e<0&&err("offset value is lower than 0. Fallback to 0."),{format:"percent",value:Math.min(Math.max(0,e),1)})}let t=0,n=0,O;function A(e){e=e?e.scrollTop:window.pageYOffset;t!==e&&(t=e,t>n?O="down":t<n&&(O="up"),n=t)}return function(){let r={},s=function(){var t="abcdefghijklmnopqrstuvwxyz",e=Date.now();const n=[];for(let e=0;e<6;e+=1){var o=t[Math.floor(Math.random()*t.length)];n.push(o)}return`${n.join("")}${e}`}(),c=[],f,l,p=0,t=!1,u=!1,d=!1,h=!1,o=[];function g(){r={stepEnter:()=>{},stepExit:()=>{},stepProgress:()=>{}},o=[]}function m(e){e&&!t&&w(),!e&&t&&b(),t=e}function i(e,t){var n=M(e);const o=c[n];void 0!==t&&(o.progress=t);t={element:e,index:n,progress:t,direction:O};"enter"===o.state&&r.stepProgress(t)}function n([e]){var t=M(e.target);const n=c[t];e=e.target.offsetHeight;e!==n.height&&(n.height=e,v(n),E(n),y(n))}function a([e]){A(l);var{isIntersecting:t,target:e}=e;(t?function(e){var t=M(e);const n=c[t];e={element:e,index:t,direction:O},n.direction=O,n.state="enter",o[t]||r.stepEnter(e),h&&(o[t]=!0)}:function(e){var t=M(e);const n=c[t];n.state&&(t={element:e,index:t,direction:O},u&&("down"===O&&n.progress<1?i(e,1):"up"===O&&0<n.progress&&i(e,0)),n.direction=O,n.state="exit",r.stepExit(t))})(e)}function x([e]){var t=M(e.target),n=c[t],{isIntersecting:o,intersectionRatio:t,target:e}=e;o&&"enter"===n.state&&i(e,t)}function v({observers:t}){Object.keys(t).map(e=>{t[e].disconnect()})}function b(){c.forEach(v)}function y(e){const t=new ResizeObserver(n);t.observe(e.node),e.observers.resize=t}function E(e){var t=window.innerHeight,n=e.offset||f,o="pixels"===n.format?1:t,n=n.value*o,o=e.height/2-n,n=e.height/2-(t-n);const r=new IntersectionObserver(a,{rootMargin:`${o}px 0px ${n}px 0px`,threshold:.5});r.observe(e.node),e.observers.step=r,d&&S({id:s,step:e,marginTop:o,marginBottom:n})}function e(e){var t=window.innerHeight,n=e.offset||f,o="pixels"===n.format?1:t,o=n.value*o,o=`${-o+e.height}px 0px ${o-t}px 0px`,t=function(e,t){var n=Math.ceil(e/t);const o=[];var r=1/n;for(let e=0;e<n+1;e+=1)o.push(e*r);return o}(e.height,p);const r=new IntersectionObserver(x,{rootMargin:o,threshold:t});r.observe(e.node),e.observers.progress=r}function w(){b(),c.forEach(y),c.forEach(E),u&&c.forEach(e)}document.addEventListener("scroll",A);const $={};return $.setup=({step:e,parent:t,offset:n=.5,threshold:o=4,progress:r=!1,once:s=!1,debug:i=!1,container:a=void 0})=>{return c=([e,t=document]=[e,t],("string"==typeof e?Array.from(t.querySelectorAll(e)):e instanceof Element?[e]:e instanceof NodeList?Array.from(e):e instanceof Array?e:[]).map((e,t)=>({index:t,direction:void 0,height:e.offsetHeight,node:e,observers:{},offset:q(e.dataset.offset),top:function(e){var{top:e}=e.getBoundingClientRect();return e+window.pageYOffset-(document.body.clientTop||0)}(e),progress:0,state:void 0}))),c.length?(u=r,h=s,d=i,p=Math.max(1,+o),f=q(n),l=a,g(),c.forEach(e=>e.node.setAttribute("data-scrollama-index",e.index)),m(!0)):k("no step elements"),$},$.enable=()=>(m(!0),$),$.disable=()=>(m(!1),$),$.destroy=()=>(m(!1),g(),$),$.resize=()=>(w(),$),$.offset=e=>null==e?f.value:(f=q(e),w(),$),$.onStepEnter=e=>("function"==typeof e?r.stepEnter=e:k("onStepEnter requires a function"),$),$.onStepExit=e=>("function"==typeof e?r.stepExit=e:k("onStepExit requires a function"),$),$.onStepProgress=e=>("function"==typeof e?r.stepProgress=e:k("onStepProgress requires a function"),$),$}});

2

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=e||self).scrollama=t()}(this,function(){"use strict";function $({id:e,step:t,marginTop:n}){var{index:o,height:t}=t,o=`scrollama__debug-step--${e}-${o}`;let r=document.querySelector(`.${o}`);r=r||function(e){const t=document.createElement("div");t.className=`scrollama__debug-step ${e}`,t.style.position="fixed",t.style.left="0",t.style.width="100%",t.style.zIndex="9999",t.style.borderTop="2px solid black",t.style.borderBottom="2px solid black";const n=document.createElement("p");return n.style.position="absolute",n.style.left="0",n.style.height="1px",n.style.width="100%",n.style.borderTop="1px dashed black",t.appendChild(n),document.body.appendChild(t),t}(o),r.style.top=`${-1*n}px`,r.style.height=`${t}px`,r.querySelector("p").style.top=`${t/2}px`}function S(e){console.error(`scrollama error: ${e}`)}function k(e){return+e.getAttribute("data-scrollama-index")}function M(e){if("string"==typeof e&&0<e.indexOf("px")){var t=+e.replace("px","");return isNaN(t)?(err("offset value must be in 'px' format. Fallback to 0.5."),{format:"percent",value:.5}):{format:"pixels",value:t}}return"number"!=typeof e&&isNaN(+e)?null:(1<e&&err("offset value is greater than 1. Fallback to 1."),e<0&&err("offset value is lower than 0. Fallback to 0."),{format:"percent",value:Math.min(Math.max(0,e),1)})}let e=0,t=0,O;function q(){e!==window.pageYOffset&&(e=window.pageYOffset,e>t?O="down":e<t&&(O="up"),t=e)}return document.addEventListener("scroll",q),function(){let r={},s=function(){var t="abcdefghijklmnopqrstuvwxyz",e=Date.now();const n=[];for(let e=0;e<6;e+=1){var o=t[Math.floor(Math.random()*t.length)];n.push(o)}return`${n.join("")}${e}`}(),a=[],c,f=0,t=!1,l=!1,p=!1,u=!1,o=[];function d(){r={stepEnter:()=>{},stepExit:()=>{},stepProgress:()=>{}},o=[]}function h(e){e&&!t&&w(),!e&&t&&v(),t=e}function i(e,t){var n=k(e);const o=a[n];void 0!==t&&(o.progress=t);t={element:e,index:n,progress:t,direction:O};"enter"===o.state&&r.stepProgress(t)}function n([e]){var t=k(e.target);const n=a[t];e=e.target.offsetHeight;e!==n.height&&(n.height=e,x(n),y(n),b(n))}function g([e]){q();var{isIntersecting:t,target:e}=e;(t?function(e){var t=k(e);const n=a[t];e={element:e,index:t,direction:O},n.direction=O,n.state="enter",o[t]||r.stepEnter(e),u&&(o[t]=!0)}:function(e){var t=k(e);const n=a[t];n.state&&(t={element:e,index:t,direction:O},l&&("down"===O&&n.progress<1?i(e,1):"up"===O&&0<n.progress&&i(e,0)),n.direction=O,n.state="exit",r.stepExit(t))})(e)}function m([e]){var t=k(e.target),n=a[t],{isIntersecting:o,intersectionRatio:t,target:e}=e;o&&"enter"===n.state&&i(e,t)}function x({observers:t}){Object.keys(t).map(e=>{t[e].disconnect()})}function v(){a.forEach(x)}function b(e){const t=new ResizeObserver(n);t.observe(e.node),e.observers.resize=t}function y(e){var t=window.innerHeight,n=e.offset||c,o="pixels"===n.format?1:t,n=n.value*o,o=e.height/2-n,n=e.height/2-(t-n);const r=new IntersectionObserver(g,{rootMargin:`${o}px 0px ${n}px 0px`,threshold:.5});r.observe(e.node),e.observers.step=r,p&&$({id:s,step:e,marginTop:o,marginBottom:n})}function e(e){var t=window.innerHeight,n=e.offset||c,o="pixels"===n.format?1:t,o=n.value*o,o=`${-o+e.height}px 0px ${o-t}px 0px`,t=function(e,t){var n=Math.ceil(e/t);const o=[];var r=1/n;for(let e=0;e<n+1;e+=1)o.push(e*r);return o}(e.height,f);const r=new IntersectionObserver(m,{rootMargin:o,threshold:t});r.observe(e.node),e.observers.progress=r}function w(){v(),a.forEach(b),a.forEach(y),l&&a.forEach(e)}const E={};return E.setup=({step:e,parent:t,offset:n=.5,threshold:o=4,progress:r=!1,once:s=!1,debug:i=!1})=>{return a=([e,t=document]=[e,t],("string"==typeof e?Array.from(t.querySelectorAll(e)):e instanceof Element?[e]:e instanceof NodeList?Array.from(e):e instanceof Array?e:[]).map((e,t)=>({index:t,direction:void 0,height:e.offsetHeight,node:e,observers:{},offset:M(e.dataset.offset),top:function(e){var{top:e}=e.getBoundingClientRect();return e+window.pageYOffset-(document.body.clientTop||0)}(e),progress:0,state:void 0}))),a.length?(l=r,u=s,p=i,f=Math.max(1,+o),c=M(n),d(),a.forEach(e=>e.node.setAttribute("data-scrollama-index",e.index)),h(!0)):S("no step elements"),E},E.enable=()=>(h(!0),E),E.disable=()=>(h(!1),E),E.destroy=()=>(h(!1),d(),E),E.resize=()=>(w(),E),E.offset=e=>null==e?c.value:(c=M(e),w(),E),E.onStepEnter=e=>("function"==typeof e?r.stepEnter=e:S("onStepEnter requires a function"),E),E.onStepExit=e=>("function"==typeof e?r.stepExit=e:S("onStepExit requires a function"),E),E.onStepProgress=e=>("function"==typeof e?r.stepProgress=e:S("onStepProgress requires a function"),E),E}});
!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):(e=e||self).scrollama=t()}(this,function(){"use strict";function S({id:e,step:t,marginTop:n}){var{index:o,height:t}=t,o=`scrollama__debug-step--${e}-${o}`;let r=document.querySelector(`.${o}`);r=r||function(e){const t=document.createElement("div");t.className=`scrollama__debug-step ${e}`,t.style.position="fixed",t.style.left="0",t.style.width="100%",t.style.zIndex="9999",t.style.borderTop="2px solid black",t.style.borderBottom="2px solid black";const n=document.createElement("p");return n.style.position="absolute",n.style.left="0",n.style.height="1px",n.style.width="100%",n.style.borderTop="1px dashed black",t.appendChild(n),document.body.appendChild(t),t}(o),r.style.top=`${-1*n}px`,r.style.height=`${t}px`,r.querySelector("p").style.top=`${t/2}px`}function k(e){console.error(`scrollama error: ${e}`)}function M(e){return+e.getAttribute("data-scrollama-index")}function q(e){if("string"==typeof e&&0<e.indexOf("px")){var t=+e.replace("px","");return isNaN(t)?(err("offset value must be in 'px' format. Fallback to 0.5."),{format:"percent",value:.5}):{format:"pixels",value:t}}return"number"!=typeof e&&isNaN(+e)?null:(1<e&&err("offset value is greater than 1. Fallback to 1."),e<0&&err("offset value is lower than 0. Fallback to 0."),{format:"percent",value:Math.min(Math.max(0,e),1)})}let t=0,n=0,O;function A(e){e=e?e.scrollTop:window.pageYOffset;t!==e&&(t=e,t>n?O="down":t<n&&(O="up"),n=t)}return function(){let r={},s=function(){var t="abcdefghijklmnopqrstuvwxyz",e=Date.now();const n=[];for(let e=0;e<6;e+=1){var o=t[Math.floor(Math.random()*t.length)];n.push(o)}return`${n.join("")}${e}`}(),c=[],f,l,p=0,t=!1,u=!1,d=!1,h=!1,o=[];function g(){r={stepEnter:()=>{},stepExit:()=>{},stepProgress:()=>{}},o=[]}function m(e){e&&!t&&w(),!e&&t&&b(),t=e}function i(e,t){var n=M(e);const o=c[n];void 0!==t&&(o.progress=t);t={element:e,index:n,progress:t,direction:O};"enter"===o.state&&r.stepProgress(t)}function n([e]){var t=M(e.target);const n=c[t];e=e.target.offsetHeight;e!==n.height&&(n.height=e,v(n),E(n),y(n))}function a([e]){A(l);var{isIntersecting:t,target:e}=e;(t?function(e){var t=M(e);const n=c[t];e={element:e,index:t,direction:O},n.direction=O,n.state="enter",o[t]||r.stepEnter(e),h&&(o[t]=!0)}:function(e){var t=M(e);const n=c[t];n.state&&(t={element:e,index:t,direction:O},u&&("down"===O&&n.progress<1?i(e,1):"up"===O&&0<n.progress&&i(e,0)),n.direction=O,n.state="exit",r.stepExit(t))})(e)}function x([e]){var t=M(e.target),n=c[t],{isIntersecting:o,intersectionRatio:t,target:e}=e;o&&"enter"===n.state&&i(e,t)}function v({observers:t}){Object.keys(t).map(e=>{t[e].disconnect()})}function b(){c.forEach(v)}function y(e){const t=new ResizeObserver(n);t.observe(e.node),e.observers.resize=t}function E(e){var t=window.innerHeight,n=e.offset||f,o="pixels"===n.format?1:t,n=n.value*o,o=e.height/2-n,n=e.height/2-(t-n);const r=new IntersectionObserver(a,{rootMargin:`${o}px 0px ${n}px 0px`,threshold:.5});r.observe(e.node),e.observers.step=r,d&&S({id:s,step:e,marginTop:o,marginBottom:n})}function e(e){var t=window.innerHeight,n=e.offset||f,o="pixels"===n.format?1:t,o=n.value*o,o=`${-o+e.height}px 0px ${o-t}px 0px`,t=function(e,t){var n=Math.ceil(e/t);const o=[];var r=1/n;for(let e=0;e<n+1;e+=1)o.push(e*r);return o}(e.height,p);const r=new IntersectionObserver(x,{rootMargin:o,threshold:t});r.observe(e.node),e.observers.progress=r}function w(){b(),c.forEach(y),c.forEach(E),u&&c.forEach(e)}document.addEventListener("scroll",A);const $={};return $.setup=({step:e,parent:t,offset:n=.5,threshold:o=4,progress:r=!1,once:s=!1,debug:i=!1,container:a=void 0})=>{return c=([e,t=document]=[e,t],("string"==typeof e?Array.from(t.querySelectorAll(e)):e instanceof Element?[e]:e instanceof NodeList?Array.from(e):e instanceof Array?e:[]).map((e,t)=>({index:t,direction:void 0,height:e.offsetHeight,node:e,observers:{},offset:q(e.dataset.offset),top:function(e){var{top:e}=e.getBoundingClientRect();return e+window.pageYOffset-(document.body.clientTop||0)}(e),progress:0,state:void 0}))),c.length?(u=r,h=s,d=i,p=Math.max(1,+o),f=q(n),l=a,g(),c.forEach(e=>e.node.setAttribute("data-scrollama-index",e.index)),m(!0)):k("no step elements"),$},$.enable=()=>(m(!0),$),$.disable=()=>(m(!1),$),$.destroy=()=>(m(!1),g(),$),$.resize=()=>(w(),$),$.offset=e=>null==e?f.value:(f=q(e),w(),$),$.onStepEnter=e=>("function"==typeof e?r.stepEnter=e:k("onStepEnter requires a function"),$),$.onStepExit=e=>("function"==typeof e?r.stepExit=e:k("onStepExit requires a function"),$),$.onStepProgress=e=>("function"==typeof e?r.stepProgress=e:k("onStepProgress requires a function"),$),$}});

2

package.json
{
"name": "scrollama",
"version": "3.0.4",
"version": "3.1.0",
"description": "Lightweight scrollytelling library using IntersectionObserver",

@@ -5,0 +5,0 @@ "main": "build/scrollama.js",

1

README.md

@@ -128,2 +128,3 @@ <img src="https://russellgoldenberg.github.io/scrollama/logo.png" width="160" alt="scrollama.js"/>

- parent (HTMLElement[]): Parent element for step selector (use if you steps are in shadow DOM). **(default: undefined)**
- container(HTMLElement): Parent element for the scroll story (use if scrollama is nested in a HTML element with overflow set to scoll or auto). **(default: window)**

@@ -130,0 +131,0 @@ #### scrollama.onStepEnter(callback)

5

src/entry.js

@@ -18,2 +18,3 @@ import { selectAll } from "./dom";

let globalOffset;
let containerElement;

@@ -142,3 +143,3 @@ let progressThreshold = 0;

function intersectStep([entry]) {
onScroll();
onScroll(containerElement);

@@ -243,2 +244,3 @@ const { isIntersecting, target } = entry;

debug = false,
container = undefined
}) => {

@@ -267,2 +269,3 @@ steps = selectAll(step, parent).map((node, index) => ({

globalOffset = parseOffset(offset);
containerElement = container;

@@ -269,0 +272,0 @@ reset();

20

src/scroll.js

@@ -1,2 +0,1 @@

let tick = false;
let previousScrollY = 0;

@@ -7,15 +6,18 @@ let currentScrollY = 0;

function onScroll() {
if (currentScrollY === window.pageYOffset) return;
previousScrollY = currentScrollY;
currentScrollY = window.pageYOffset;
if (currentScrollY > comparisonScrollY) direction = "down";
else if (currentScrollY < comparisonScrollY) direction = "up";
comparisonScrollY = currentScrollY;
function onScroll(container) {
const scrollTop = container ? container.scrollTop : window.pageYOffset;
if (currentScrollY === scrollTop) return;
previousScrollY = currentScrollY;
currentScrollY = scrollTop;
if (currentScrollY > comparisonScrollY) direction = "down";
else if (currentScrollY < comparisonScrollY) direction = "up";
comparisonScrollY = currentScrollY;
}
function setupScroll() {
document.addEventListener("scroll", onScroll);
document.addEventListener("scroll", onScroll);
}
export { setupScroll, onScroll, direction, previousScrollY, currentScrollY };
SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc