scroll-snap
Version:
Snap page when user stops scrolling, with a customizable configuration and a consistent cross browser behaviour
2 lines • 11.9 kB
JavaScript
!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define("scrollSnap",[],e):"object"==typeof exports?exports.scrollSnap=e():t.scrollSnap=e()}("undefined"!=typeof self?self:this,(()=>(()=>{"use strict";var t={d:(e,n)=>{for(var o in n)t.o(n,o)&&!t.o(e,o)&&Object.defineProperty(e,o,{enumerable:!0,get:n[o]})},o:(t,e)=>Object.prototype.hasOwnProperty.call(t,e)},e={};t.d(e,{default:()=>E});var n=50,o=100,r=300,i=.2,a=!1,l=!1,c=!0,s=function(){};function u(t){return t<.5?2*t*t:(4-2*t)*t-1}function d(t,e){return"vh"===e.unit?Math.max(document.documentElement.clientHeight,window.innerHeight||1)/100*e.value:"%"===e.unit?t.clientHeight/100*e.value:e.value}function p(t,e){return"vw"===e.unit?Math.max(document.documentElement.clientWidth,window.innerWidth||1)/100*e.value:"%"===e.unit?t.clientWidth/100*e.value:e.value}function f(t,e,n){return Math.max(Math.min(n,e),t)}function y(t,e){return Math.round(1e3*t/(1e3*e))*e}var h=function(t,e){var n="function"==typeof Symbol&&t[Symbol.iterator];if(!n)return t;var o,r,i=n.call(t),a=[];try{for(;(void 0===e||e-- >0)&&!(o=i.next()).done;)a.push(o.value)}catch(t){r={error:t}}finally{try{o&&!o.done&&(n=i.return)&&n.call(i)}finally{if(r)throw r.error}}return a},v={right:function(t){return"data:image/svg+xml;base64,".concat(btoa('<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="'.concat(t,'" d="M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z"/></svg>')))},left:function(t){return"data:image/svg+xml;base64,".concat(btoa('<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="'.concat(t,'" d="M15.41 16.59L10.83 12l4.58-4.59L14 6l-6 6 6 6 1.41-1.41z"/></svg>')))},up:function(t){return"data:image/svg+xml;base64,".concat(btoa('<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="'.concat(t,'" d="M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6 1.41-1.41z"/></svg>')))},down:function(t){return"data:image/svg+xml;base64,".concat(btoa('<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="'.concat(t,'" d="M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z"/></svg>')))}},x=null;function w(t,e,n){if(n&&Object.keys(e).length){var o=t.getBoundingClientRect();e.up.style.top="".concat(o.top+16,"px"),e.up.style.left="".concat(o.left+o.width/2-20,"px"),e.down.style.bottom="".concat(window.innerHeight-o.bottom+16,"px"),e.down.style.left="".concat(o.left+o.width/2-20,"px"),e.left.style.left="".concat(o.left+16,"px"),e.left.style.top="".concat(o.top+o.height/2-20,"px"),e.right.style.right="".concat(window.innerWidth-o.right+16,"px"),e.right.style.top="".concat(o.top+o.height/2-20,"px"),Object.values(e).forEach((function(e){var n=function(t,e){return e.includes("up")?t.scrollTop>0:e.includes("down")?t.scrollTop<t.scrollHeight-t.clientHeight:e.includes("left")?t.scrollLeft>0:!!e.includes("right")&&t.scrollLeft<t.scrollWidth-t.clientWidth}(t,e.className);e.style.display=n?"flex":"none",n&&(e.style.opacity=t.matches(":hover")||e===x?"0.6":"0")}))}}function m(t,e,n,o,r,i,a){var l="x"===n?"scrollLeft":"scrollTop";i[n]&&cancelAnimationFrame(i[n]);var c=t[l],s=e[n];if(Math.abs(c-s)<1||isNaN(s))a();else{var u,d=c;i[n]=requestAnimationFrame((function e(p){u||(u=p);var f=p-u;if(f<r){var y=c+(s-c)*o(f/r);Math.abs(s-y)<Math.abs(s-d)&&(t[l]=y,d=y),i[n]=requestAnimationFrame(e)}else t[l]=s,i[n]=0,a()}))}}function g(t,e,n,o){t.addEventListener(e,n),o.push({element:t,event:e,handler:n})}var b=function(t,e){var n="function"==typeof Symbol&&t[Symbol.iterator];if(!n)return t;var o,r,i=n.call(t),a=[];try{for(;(void 0===e||e-- >0)&&!(o=i.next()).done;)a.push(o.value)}catch(t){r={error:t}}finally{try{o&&!o.done&&(n=i.return)&&n.call(i)}finally{if(r)throw r.error}}return a};function E(t,e,E){void 0===e&&(e={});var M,L,N,O,T,k,A,S,C="function"==typeof E?E:s,U=null,B={x:0,y:0},j=!1,D={},H=window.innerWidth,W=window.innerHeight,R={x:!1,y:!1},z={x:0,y:0},F=[],q={x:0,y:0},I={x:0,y:0};!function(t){var e=t.snapDestinationX,o=t.snapDestinationY,r=t.timeout,i=t.duration,a=t.threshold,l=t.easing,c=t.snapStop,s=t.showArrows,u=t.enableKeyboard;if(e&&"string"!=typeof e&&"number"!=typeof e)throw new Error("Settings property 'snapDestinationX' is not valid, expected STRING or NUMBER but found ".concat((typeof e).toUpperCase()));if(o&&"string"!=typeof o&&"number"!=typeof o)throw new Error("Settings property 'snapDestinationY' is not valid, expected STRING or NUMBER but found ".concat((typeof o).toUpperCase()));if(r&&(isNaN(r)||"boolean"==typeof r))throw new Error("Optional settings property 'timeout' is not valid, expected NUMBER but found ".concat((typeof r).toUpperCase()));if(r&&r<n&&console.warn("Timeout value less than ".concat(n,"ms may cause issues with momentum scrolling")),i&&(isNaN(i)||"boolean"==typeof i))throw new Error("Optional settings property 'duration' is not valid, expected NUMBER but found ".concat((typeof i).toUpperCase()));if(a&&(isNaN(a)||"boolean"==typeof a))throw new Error("Optional settings property 'threshold' is not valid, expected NUMBER but found ".concat((typeof a).toUpperCase()));if(l&&"function"!=typeof l)throw new Error("Optional settings property 'easing' is not valid, expected FUNCTION but found ".concat((typeof l).toUpperCase()));if(c&&"boolean"!=typeof c)throw new Error("Optional settings property 'snapStop' is not valid, expected BOOLEAN but found ".concat((typeof c).toUpperCase()));if(s&&"boolean"!=typeof s)throw new Error("Optional settings property 'showArrows' is not valid, expected BOOLEAN but found ".concat((typeof c).toUpperCase()));if(u&&"boolean"!=typeof u)throw new Error("Optional settings property 'enableKeyboard' is not valid, expected BOOLEAN but found ".concat((typeof c).toUpperCase()))}(e);var K=e.timeout,P=void 0===K?o:K,X=e.duration,Y=void 0===X?r:X,G=e.threshold,J=void 0===G?i:G,Q=e.snapStop,V=void 0===Q?a:Q,Z=e.showArrows,$=void 0===Z?l:Z,_=e.enableKeyboard,tt=void 0===_?c:_,et=e.easing,nt=void 0===et?u:et;function ot(t,e){I[t]=e}function rt(t,e){var n=t,o=null!==B[e]?n-B[e]:0;return B[e]=n,O&&clearTimeout(O),O=window.setTimeout((function(){B[e]=null}),100),o}function it(){k=rt(L.scrollLeft,"x"),A=rt(L.scrollTop,"y"),0===k||R.x||(q.x=Math.sign(k)),0===A||R.y||(q.y=Math.sign(A)),R.x&&R.y||0===k&&0===A||function(t){z.x&&clearTimeout(z.x),z.y&&clearTimeout(z.y),N?clearTimeout(N):T={y:t.scrollTop,x:t.scrollLeft},N=window.setTimeout(lt,P)}(L)}function at(t,e,n){var o="x"===t?"scrollWidth":"scrollHeight",r="x"===t?"clientWidth":"clientHeight",i=L["x"===t?"scrollLeft":"scrollTop"],a=function(t){return I[t]}(t);Math.abs(i-a)<1&&(i=a);var l,c=i/n;if(j){var s=Math.round(c)+e;return f(0,L[o]-L[r],s*n)}return function(t,e){if(j)return!0;var n=e%1,o=n>=0?n:1+n;return t>0?o>J:1-o>J}(e,c)?(l=V?Math.round(a/n)+(e>0?1:-1):e>0?Math.ceil(c):Math.floor(c),f(0,L[o]-L[r],l*n)):y(i,n)}function lt(){if(T.y!==L.scrollTop||T.x!==L.scrollLeft){var t={y:q.y,x:q.x},e={x:at("x",t.x,Math.round(p(L,S.x))),y:at("y",t.y,Math.round(d(L,S.y)))};0===q.x||R.x||(M.removeEventListener("scroll",it),R.x=!0,m(L,{x:e.x},"x",nt,Y,z,(function(){R.x=!1,q.x=0,M.addEventListener("scroll",it),ot("x",e.x),R.y||C()}))),0===q.y||R.y||(M.removeEventListener("scroll",it),R.y=!0,m(L,{y:e.y},"y",nt,Y,z,(function(){R.y=!1,q.y=0,M.addEventListener("scroll",it),ot("y",e.y),R.x||C()})))}}function ct(t){var e="up"===t||"down"===t?"y":"x";if(!R[e]){var n={up:{x:0,y:-1},down:{x:0,y:1},left:{x:-1,y:0},right:{x:1,y:0}};j=!0;var o={y:Math.round(d(L,S.y)),x:Math.round(p(L,S.x))},r=n[t],i={y:r.y?y(L.scrollTop+r.y*o.y,o.y):y(L.scrollTop,o.y),x:r.x?y(L.scrollLeft+r.x*o.x,o.x):y(L.scrollLeft,o.x)};q[e]=n[t][e],R[e]=!0,m(L,i,e,nt,Y,z,(function(){R[e]=!1,q[e]=0,j=!1,ot(e,i[e]),C()}))}}function st(){var e=Math.round(d(L,S.y)),n=Math.round(p(L,S.x)),o=Math.round(L.scrollTop/e),r=Math.round(L.scrollLeft/n);requestAnimationFrame((function(){var e=Math.round(d(L,S.y)),n=Math.round(p(L,S.x)),i={y:o*e,x:r*n};window.innerWidth===H&&window.innerHeight===W||(j=!0,m(L,i,"x",nt,Y,z,(function(){m(L,i,"y",nt,Y,z,(function(){j=!1,$&&w(t,D,U)}))})),H=window.innerWidth,W=window.innerHeight)}))}function ut(){(function(t){L=t,g(M=t===document.documentElement?window:t,"scroll",it,F),S=function(t,e){var n=/([+-]?(?=\.\d|\d)(?:\d+)?(?:\.?\d*)(?:[eE][+-]?\d+)?)(px|%|vw|vh)/,o={y:{value:0,unit:"px"},x:{value:0,unit:"px"}};if("number"==typeof e)o.y.value=e;else{var r=n.exec(e);null!==r&&(o.y={value:Number(r[1]),unit:r[2]})}if("number"==typeof t)o.x.value=t;else{var i=n.exec(t);null!==i&&(o.x={value:Number(i[1]),unit:i[2]})}return o}(e.snapDestinationX,e.snapDestinationY),I={x:y(t.scrollLeft,Math.round(p(t,S.x))),y:y(t.scrollTop,Math.round(d(t,S.y)))}})(t),tt&&(t.getAttribute("tabindex")||t.setAttribute("tabindex","0"),g(t,"keydown",(function(t){return function(t,e,n,o){var r=t;if(n&&e.contains(r.target))switch(r.key){case"ArrowUp":t.preventDefault(),o("up");break;case"ArrowDown":t.preventDefault(),o("down");break;case"ArrowLeft":t.preventDefault(),o("left");break;case"ArrowRight":t.preventDefault(),o("right")}}(t,L,tt,ct)}),F)),g(window,"resize",st,F),$&&(D=function(t){var e={up:document.createElement("div"),down:document.createElement("div"),left:document.createElement("div"),right:document.createElement("div")};return Object.entries(e).forEach((function(e){var n=h(e,2),o=n[0],r=n[1],i=function(t){var e,n=(null===(e=window.getComputedStyle(t).backgroundColor.match(/\d+/g))||void 0===e?void 0:e.map(Number))||[255,255,255];return(299*n[0]+587*n[1]+114*n[2])/1e3>128?"light":"dark"}(t),a="light"===i?"#1a1a1a":"#ffffff",l="light"===i?"rgba(255, 255, 255, 0.8)":"rgba(0, 0, 0, 0.8)";r.className="scroll-snap-arrow scroll-snap-arrow-".concat(o),r.style.cssText="\n position: fixed;\n width: 40px;\n height: 40px;\n background-size: 24px;\n background-position: center;\n background-repeat: no-repeat;\n opacity: 0;\n transition: opacity 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;\n cursor: pointer;\n z-index: 1000;\n background-image: url(".concat(v[o](a),");\n background-color: ").concat(l,";\n backdrop-filter: blur(8px);\n -webkit-backdrop-filter: blur(8px);\n border-radius: 50%;\n box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);\n display: none;\n align-items: center;\n justify-content: center;\n pointer-events: auto;\n user-select: none;\n "),r.addEventListener("mouseenter",(function(){"none"!==r.style.display&&(x=r,r.style.opacity="0.95",r.style.transform="scale(1.05)",r.style.boxShadow="0 4px 12px rgba(0, 0, 0, 0.2)")})),r.addEventListener("mouseleave",(function(){"none"!==r.style.display&&(x=null,r.style.opacity="0.6",r.style.transform="scale(1)",r.style.boxShadow="0 2px 8px rgba(0, 0, 0, 0.15)")}))})),e}(L),U||((U=document.createElement("div")).style.cssText="\n position: fixed;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n pointer-events: none;\n z-index: 999;\n ",document.body.appendChild(U)),Object.entries(D).forEach((function(t){var e=b(t,2),n=e[0],o=e[1];o.onclick=function(t){t.stopPropagation(),ct(n)},U.appendChild(o)})),g(t,"mouseenter",(function(){return w(t,D,U)}),F),g(t,"mouseleave",(function(){Object.values(D).forEach((function(t){t.style.opacity="0"}))}),F),g(t,"scroll",(function(){return w(t,D,U)}),F),g(window,"scroll",(function(){return w(t,D,U)}),F),w(t,D,U))}return ut(),{bind:ut,unbind:function(){!function(t){t.forEach((function(t){var e=t.element,n=t.event,o=t.handler;e.removeEventListener(n,o)})),t.splice(0,t.length)}(F),F=[],$&&(Object.values(D).forEach((function(t){t.onclick=null})),(null==U?void 0:U.parentNode)&&(U.parentNode.removeChild(U),U=null),D={}),z.x&&(cancelAnimationFrame(z.x),z.x=0),z.y&&(cancelAnimationFrame(z.y),z.y=0),R={x:!1,y:!1},q={x:0,y:0},M=null,L=null}}}return e.default})()));
//# sourceMappingURL=scroll-snap.min.js.map