scroll-snap - npm Package Compare versions

Comparing version 5.0.1 to 5.0.2

dist/scroll-snap.esm.js

@@ -136,2 +136,3 @@ /******/ // The require scope
 }
+var hoveredArrow = null;
 function createArrowElements(target) {
@@ -153,2 +154,3 @@ var arrows = {
             if (element.style.display !== 'none') {
+                hoveredArrow = element;
                 element.style.opacity = '0.95';
@@ -161,2 +163,3 @@ element.style.transform = 'scale(1.05)';
             if (element.style.display !== 'none') {
+                hoveredArrow = null;
                 element.style.opacity = '0.6';
@@ -184,15 +187,24 @@ element.style.transform = 'scale(1)';
     arrows.right.style.top = "".concat(rect.top + rect.height / 2 - halfArrowSize, "px");
-    arrows.up.style.display = element.scrollTop > 0 ? 'flex' : 'none';
-    arrows.down.style.display =
-        element.scrollTop < element.scrollHeight - element.clientHeight ? 'flex' : 'none';
-    arrows.left.style.display = element.scrollLeft > 0 ? 'flex' : 'none';
-    arrows.right.style.display =
-        element.scrollLeft < element.scrollWidth - element.clientWidth ? 'flex' : 'none';
-    if (element.matches(':hover')) {
-        Object.values(arrows).forEach(function (arrow) {
-            if (arrow.style.display === 'flex') {
-                arrow.style.opacity = '0.6';
-            }
-        });
+    Object.values(arrows).forEach(function (arrow) {
+        var shouldDisplay = getArrowVisibility(element, arrow.className);
+        arrow.style.display = shouldDisplay ? 'flex' : 'none';
+        if (shouldDisplay) {
+            arrow.style.opacity = element.matches(':hover') || arrow === hoveredArrow ? '0.6' : '0';
+        }
+    });
+}
+function getArrowVisibility(element, className) {
+    if (className.includes('up')) {
+        return element.scrollTop > 0;
     }
+    if (className.includes('down')) {
+        return element.scrollTop < element.scrollHeight - element.clientHeight;
+    }
+    if (className.includes('left')) {
+        return element.scrollLeft > 0;
+    }
+    if (className.includes('right')) {
+        return element.scrollLeft < element.scrollWidth - element.clientWidth;
+    }
+    return false;
 }
@@ -525,2 +537,7 @@
         addEventHandler(element, 'mouseenter', function () { return updateArrowsPosition(element, arrows, arrowContainer); }, activeHandlers);
+        addEventHandler(element, 'mouseleave', function () {
+            Object.values(arrows).forEach(function (arrow) {
+                arrow.style.opacity = '0';
+            });
+        }, activeHandlers);
         addEventHandler(element, 'scroll', function () { return updateArrowsPosition(element, arrows, arrowContainer); }, activeHandlers);
@@ -527,0 +544,0 @@ addEventHandler(window, 'scroll', function () { return updateArrowsPosition(element, arrows, arrowContainer); }, activeHandlers);

dist/scroll-snap.js

@@ -148,2 +148,3 @@ (function webpackUniversalModuleDefinition(root, factory) {
 }
+var hoveredArrow = null;
 function createArrowElements(target) {
@@ -165,2 +166,3 @@ var arrows = {
             if (element.style.display !== 'none') {
+                hoveredArrow = element;
                 element.style.opacity = '0.95';
@@ -173,2 +175,3 @@ element.style.transform = 'scale(1.05)';
             if (element.style.display !== 'none') {
+                hoveredArrow = null;
                 element.style.opacity = '0.6';
@@ -196,15 +199,24 @@ element.style.transform = 'scale(1)';
     arrows.right.style.top = "".concat(rect.top + rect.height / 2 - halfArrowSize, "px");
-    arrows.up.style.display = element.scrollTop > 0 ? 'flex' : 'none';
-    arrows.down.style.display =
-        element.scrollTop < element.scrollHeight - element.clientHeight ? 'flex' : 'none';
-    arrows.left.style.display = element.scrollLeft > 0 ? 'flex' : 'none';
-    arrows.right.style.display =
-        element.scrollLeft < element.scrollWidth - element.clientWidth ? 'flex' : 'none';
-    if (element.matches(':hover')) {
-        Object.values(arrows).forEach(function (arrow) {
-            if (arrow.style.display === 'flex') {
-                arrow.style.opacity = '0.6';
-            }
-        });
+    Object.values(arrows).forEach(function (arrow) {
+        var shouldDisplay = getArrowVisibility(element, arrow.className);
+        arrow.style.display = shouldDisplay ? 'flex' : 'none';
+        if (shouldDisplay) {
+            arrow.style.opacity = element.matches(':hover') || arrow === hoveredArrow ? '0.6' : '0';
+        }
+    });
+}
+function getArrowVisibility(element, className) {
+    if (className.includes('up')) {
+        return element.scrollTop > 0;
     }
+    if (className.includes('down')) {
+        return element.scrollTop < element.scrollHeight - element.clientHeight;
+    }
+    if (className.includes('left')) {
+        return element.scrollLeft > 0;
+    }
+    if (className.includes('right')) {
+        return element.scrollLeft < element.scrollWidth - element.clientWidth;
+    }
+    return false;
 }
@@ -537,2 +549,7 @@
         addEventHandler(element, 'mouseenter', function () { return updateArrowsPosition(element, arrows, arrowContainer); }, activeHandlers);
+        addEventHandler(element, 'mouseleave', function () {
+            Object.values(arrows).forEach(function (arrow) {
+                arrow.style.opacity = '0';
+            });
+        }, activeHandlers);
         addEventHandler(element, 'scroll', function () { return updateArrowsPosition(element, arrows, arrowContainer); }, activeHandlers);
@@ -539,0 +556,0 @@ addEventHandler(window, 'scroll', function () { return updateArrowsPosition(element, arrows, arrowContainer); }, activeHandlers);

dist/scroll-snap.min.js

@@ -1,2 +0,2 @@
-!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:()=>b});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 p(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 d(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 x=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},h={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>')))}};function v(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"),e.up.style.display=t.scrollTop>0?"flex":"none",e.down.style.display=t.scrollTop<t.scrollHeight-t.clientHeight?"flex":"none",e.left.style.display=t.scrollLeft>0?"flex":"none",e.right.style.display=t.scrollLeft<t.scrollWidth-t.clientWidth?"flex":"none",t.matches(":hover")&&Object.values(e).forEach((function(t){"flex"===t.style.display&&(t.style.opacity="0.6")}))}}function w(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,p=c;i[n]=requestAnimationFrame((function e(d){u||(u=d);var f=d-u;if(f<r){var y=c+(s-c)*o(f/r);Math.abs(s-y)<Math.abs(s-p)&&(t[l]=y,p=y),i[n]=requestAnimationFrame(e)}else t[l]=s,i[n]=0,a()}))}}function m(t,e,n,o){t.addEventListener(e,n),o.push({element:t,event:e,handler:n})}var g=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 b(t,e,b){void 0===e&&(e={});var E,M,L,N,T,O,k,A,S="function"==typeof b?b:s,C=null,U={x:0,y:0},B=!1,j={},D=window.innerWidth,H=window.innerHeight,W={x:!1,y:!1},R={x:0,y:0},z=[],F={x:0,y:0},q={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 I=e.timeout,K=void 0===I?o:I,P=e.duration,X=void 0===P?r:P,Y=e.threshold,G=void 0===Y?i:Y,J=e.snapStop,Q=void 0===J?a:J,V=e.showArrows,Z=void 0===V?l:V,$=e.enableKeyboard,_=void 0===$?c:$,tt=e.easing,et=void 0===tt?u:tt;function nt(t,e){q[t]=e}function ot(t,e){var n=t,o=null!==U[e]?n-U[e]:0;return U[e]=n,N&&clearTimeout(N),N=window.setTimeout((function(){U[e]=null}),100),o}function rt(){O=ot(M.scrollLeft,"x"),k=ot(M.scrollTop,"y"),0===O||W.x||(F.x=Math.sign(O)),0===k||W.y||(F.y=Math.sign(k)),W.x&&W.y||0===O&&0===k||function(t){R.x&&clearTimeout(R.x),R.y&&clearTimeout(R.y),L?clearTimeout(L):T={y:t.scrollTop,x:t.scrollLeft},L=window.setTimeout(at,K)}(M)}function it(t,e,n){var o="x"===t?"scrollWidth":"scrollHeight",r="x"===t?"clientWidth":"clientHeight",i=M["x"===t?"scrollLeft":"scrollTop"],a=function(t){return q[t]}(t);Math.abs(i-a)<1&&(i=a);var l,c=i/n;if(B){var s=Math.round(c)+e;return f(0,M[o]-M[r],s*n)}return function(t,e){if(B)return!0;var n=e%1,o=n>=0?n:1+n;return t>0?o>G:1-o>G}(e,c)?(l=Q?Math.round(a/n)+(e>0?1:-1):e>0?Math.ceil(c):Math.floor(c),f(0,M[o]-M[r],l*n)):y(i,n)}function at(){if(T.y!==M.scrollTop||T.x!==M.scrollLeft){var t={y:F.y,x:F.x},e={x:it("x",t.x,Math.round(d(M,A.x))),y:it("y",t.y,Math.round(p(M,A.y)))};0===F.x||W.x||(E.removeEventListener("scroll",rt),W.x=!0,w(M,{x:e.x},"x",et,X,R,(function(){W.x=!1,F.x=0,E.addEventListener("scroll",rt),nt("x",e.x),W.y||S()}))),0===F.y||W.y||(E.removeEventListener("scroll",rt),W.y=!0,w(M,{y:e.y},"y",et,X,R,(function(){W.y=!1,F.y=0,E.addEventListener("scroll",rt),nt("y",e.y),W.x||S()})))}}function lt(t){var e="up"===t||"down"===t?"y":"x";if(!W[e]){var n={up:{x:0,y:-1},down:{x:0,y:1},left:{x:-1,y:0},right:{x:1,y:0}};B=!0;var o={y:Math.round(p(M,A.y)),x:Math.round(d(M,A.x))},r=n[t],i={y:r.y?y(M.scrollTop+r.y*o.y,o.y):y(M.scrollTop,o.y),x:r.x?y(M.scrollLeft+r.x*o.x,o.x):y(M.scrollLeft,o.x)};F[e]=n[t][e],W[e]=!0,w(M,i,e,et,X,R,(function(){W[e]=!1,F[e]=0,B=!1,nt(e,i[e]),S()}))}}function ct(){var e=Math.round(p(M,A.y)),n=Math.round(d(M,A.x)),o=Math.round(M.scrollTop/e),r=Math.round(M.scrollLeft/n);requestAnimationFrame((function(){var e=Math.round(p(M,A.y)),n=Math.round(d(M,A.x)),i={y:o*e,x:r*n};window.innerWidth===D&&window.innerHeight===H||(B=!0,w(M,i,"x",et,X,R,(function(){w(M,i,"y",et,X,R,(function(){B=!1,Z&&v(t,j,C)}))})),D=window.innerWidth,H=window.innerHeight)}))}function st(){(function(t){M=t,m(E=t===document.documentElement?window:t,"scroll",rt,z),A=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),q={x:y(t.scrollLeft,Math.round(d(t,A.x))),y:y(t.scrollTop,Math.round(p(t,A.y)))}})(t),_&&(t.getAttribute("tabindex")||t.setAttribute("tabindex","0"),m(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,M,_,lt)}),z)),m(window,"resize",ct,z),Z&&(j=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=x(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(h[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&&(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&&(r.style.opacity="0.6",r.style.transform="scale(1)",r.style.boxShadow="0 2px 8px rgba(0, 0, 0, 0.15)")}))})),e}(M),C||((C=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(C)),Object.entries(j).forEach((function(t){var e=g(t,2),n=e[0],o=e[1];o.onclick=function(t){t.stopPropagation(),lt(n)},C.appendChild(o)})),m(t,"mouseenter",(function(){return v(t,j,C)}),z),m(t,"scroll",(function(){return v(t,j,C)}),z),m(window,"scroll",(function(){return v(t,j,C)}),z),v(t,j,C))}return st(),{bind:st,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)}(z),z=[],Z&&(Object.values(j).forEach((function(t){t.onclick=null})),(null==C?void 0:C.parentNode)&&(C.parentNode.removeChild(C),C=null),j={}),R.x&&(cancelAnimationFrame(R.x),R.x=0),R.y&&(cancelAnimationFrame(R.y),R.y=0),W={x:!1,y:!1},F={x:0,y:0},E=null,M=null}}}return e.default})()));
+!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

package.json

 {
   "name": "scroll-snap",
-  "version": "5.0.1",
+  "version": "5.0.2",
   "description": "Snap page when user stops scrolling, with a customizable configuration and a consistent cross browser behaviour",
@@ -5,0 +5,0 @@ "main": "dist/scroll-snap.min.js",

No alert changes

Improved metrics

Total package byte prevSize

222423

1.77%

Lines of code

1432

2.51%

No dependency changes