var e = ":root{--scrollerful-delay:0s}.scrollerful{min-height:100%}@supports(scroll-snap-stop:always){.scrollerful--snap,.scrollerful__snap-page,.scrollerful__snap-page body{scroll-snap-stop:always;scroll-snap-type:y proximity}}.scrollerful--snap,.scrollerful__snap-page{overflow-y:auto}@supports(scroll-snap-stop:always){.scrollerful--snap .scrollerful__tray,.scrollerful__snap-page .scrollerful__tray{scroll-snap-align:start end}}.scrollerful--snap{height:100%}.scrollerful__ruler{background:none transparent;border:none;bottom:0;display:block;height:100vh;height:100lvh;left:-200%;pointer-events:none;position:absolute;top:0;-webkit-user-select:none;-moz-user-select:none;user-select:none;width:1rem;z-index:-10}.scrollerful__plate{align-items:center;display:flex;flex-flow:column;height:100vh;height:100lvh;justify-content:center;max-height:100%;overflow:hidden;position:sticky;top:0}.scrollerful__sprite,.scrollerful__sprite--inner,.scrollerful__sprite--outer{animation-duration:100s;animation-fill-mode:both;animation-play-state:paused;animation-timing-function:linear}.scrollerful__sprite,.scrollerful__sprite--inner{animation-delay:calc(var(--scrollerful-progress-inner, 0)*-100s + var(--scrollerful-delay, 0))}.scrollerful__sprite,.scrollerful__sprite--outer{animation-delay:calc(var(--scrollerful-progress-outer, 0)*-100s + var(--scrollerful-delay, 0))}.scrollerful__tray{height:300vh;height:300lvh;position:relative}.scrollerful__tray--padding{height:100vh;height:100lvh}";const t="scrollerful",r=`${t}--inside--inner`,n=`${t}--inside--outer`,o=`${t}__ruler`,s=`--${t}-progress-inner`,i=`--${t}-progress-outer`,c=`${t}innerenter`,d=`${t}innerexit`,l=`${t}outerenter`,a=`${t}outerexit`,u=`${t}scroll`,g=`.${t}`,p=`.${t}__tray`,m=`${t}_ruler`,h=`${t}_style`,y=(e,t,r)=>{const[n,o]=((...e)=>e.sort(((e,t)=>e-t)))(t,r);return e>=n&&e<=o},v=e=>{const t=(e=>{const{containerTop:t,containerHeight:r,viewHeight:n}=(e=>{if(["auto","scroll"].includes(getComputedStyle(e).getPropertyValue("overflow-y"))){const t=e.getBoundingClientRect(),{top:r,height:n}=t,{scrollHeight:o}=e;return {containerTop:r,containerHeight:o,viewHeight:n}}const t=document.getElementById(m).getBoundingClientRect().height,{height:r,top:n}=e.getBoundingClientRect();return {containerTop:n,containerHeight:r,viewHeight:t}})(e);return {inner:t/-(r-n),outer:(t-n)/-(r+n)}})(e);e.dispatchEvent(new CustomEvent(u,{detail:{progress:t},bubbles:!0,cancelable:!0,composed:!1}));},E=({target:e,detail:{progress:{inner:t,outer:r}}})=>{var n;y(r,0,1)?(e.style.setProperty(s,t),e.style.setProperty(i,r)):(n=e,[s,i].forEach((e=>n.style.removeProperty(e))));},b=(e,t,r,n,o)=>{y(t,0,1)?e.classList.contains(o)||(e.classList.add(o),e.dispatchEvent(new CustomEvent(r,{bubbles:!0,cancelable:!0,composed:!1}))):e.classList.contains(o)&&(e.classList.remove(o),e.dispatchEvent(new CustomEvent(n,{bubbles:!0,cancelable:!0,composed:!1})));},$=({target:e,detail:{progress:{inner:t}}})=>{b(e,t,c,d,r);},f=({target:e,detail:{progress:{outer:t}}})=>{b(e,t,l,a,n);},L=({target:e})=>{[e,...e.querySelectorAll(p)].forEach((e=>{v(e);}));},w=e=>{[e,...e.querySelectorAll(p)].forEach((e=>{e.addEventListener(u,E),e.addEventListener(u,f),e.addEventListener(u,$);}));};var scrollerful = ()=>{(()=>{if(document.getElementById(h))return;const t=document.createElement("style");t.setAttribute("id",h),t.textContent=e,document.head.appendChild(t);})(),(()=>{const e=document.createElement("div");e.setAttribute("id",m),e.classList.add(o),document.body.appendChild(e);})(),Array.from(document.querySelectorAll(g)).forEach((e=>{e.addEventListener("resize",L),e.addEventListener("scroll",L),w(e),L({target:e});})),window.addEventListener("resize",(()=>L({target:document.body}))),window.addEventListener("scroll",(()=>L({target:document.body}))),w(document.body),L({target:document.body});};export{scrollerful as default};
0 commit comments