New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →
zenscroll - npm Package Compare versions
Comparing version 3.0.1 to 3.0.2
| { | ||
| "name": "zenscroll", | ||
| "version": "3.0.1", | ||
| "version": "3.0.2", | ||
| "description": "A module to smooth-scroll web pages and DIVs", | ||
@@ -5,0 +5,0 @@ "main": "zenscroll.js", |
@@ -15,3 +15,3 @@ <p align="center"> | ||
| 1 kilobyte of pure JavaScript. No dependencies. | ||
| One kilobyte of pure JavaScript. No dependencies. | ||
@@ -25,3 +25,4 @@ | ||
| - Animated scrolling to anchors on the same page (unless the browser natively supports it and it’s enabled). | ||
| - Smooth animated scrolling, using the browser’s built-in smooth-behavior if it’s enabled. | ||
| - Automatic smooth-scolling on links within the same page. | ||
| - Scroll to the top of a specific element. | ||
@@ -78,9 +79,7 @@ - Scrolling an element into view, making sure both top & bottom are visible, if possible. | ||
| ````css | ||
| body, .smooth-container { scroll-behavior: smooth } | ||
| body, .smooth-container { scroll-behavior: smooth } | ||
| ```` | ||
| In this case the browser already does native smooth scrolling which is probably more efficient so Zenscroll uses that automatically. | ||
| In this case Zenscroll will use the browser’s built-in support for all scroll functions. However, note that if you use the native smooth-scrolling then you loose the finer control options that Zenscroll offers: the speed of the animation, and the edge offset for links within the page. Only set this CSS property on the `body` or on the elements if you don’t need this level of control. | ||
| However, note that if you enable native smooth-scrolling then you loose the finer control options that Zenscroll offers: the speed of the animation, and the edge offset. So only set this CSS property on the `body` or on the elements if you don’t need this level of control. | ||
| ### Disabling automatic smoothing on local links | ||
@@ -106,10 +105,10 @@ | ||
| However, automatic smooth scrolling is not enabled in these two cases: | ||
| However, automatic smooth scrolling within the same page is not enabled in these two cases: | ||
| 1. If you set `window.noZensmooth` to a non-falsy value (see [above](#disablingautomaticsmoothingonlocallinks)). | ||
| 2. If the `scroll-behavior` CSS property is set to `smooth` on the `body` (see [above](#enablingnativesmooth-scrollinginthebrowser)). | ||
| 2. If the `scroll-behavior` CSS property is set to `smooth` on the `body` (see [above](#enablingnativesmooth-scrollinginthebrowser)). In this case the browser is already smooth-scrolling within the same page. | ||
| If you want only some of the links to be excluded from the automatic smoothing then start with the path of the page. E.g., instead of writing `<a href="#about">` use `<a href="/#about">`. | ||
| Automatic smooth scrolling works with content you dynamically load via AJAX, as Zenscroll uses a generic click handler. Internal links are intentionally not added to the history to save the users from having to hit the Back button too many times afterwards. Since the automatic smooth-scrolling is implemented a progressive enhancement, all internal links still work even in old browsers. | ||
| Automatic smooth-scrolling works also with content you dynamically load via AJAX, as Zenscroll uses a generic click handler. Internal links are intentionally not added to the history to save the users from having to hit the Back button too many times afterwards. Since the automatic smooth-scrolling is implemented a progressive enhancement, all internal links still work even in old browsers. | ||
@@ -124,3 +123,3 @@ | ||
| Note that Zenscroll intentionally leaves a few pixels (by default 9px) from the edges of the screen or scolling container. If you have a fixed navigation bar or footer bar then you probably need more than that. Or you may want to set it to zero. You can globally override the default value by calling `zenscroll.setup()` (see below) or with the `edgeOffset` parameter of the constructor when you create a scroller for a DIV. | ||
| Note that Zenscroll intentionally leaves a few pixels (by default 9px) from the edges of the screen or scolling container. If you have a fixed navigation bar or footer bar then you probably need more than that. Or you may want to set it to zero. You can globally override the default value by calling `zenscroll.setup()` (see below), or by providing the `edgeOffset` parameter when you create a scroller for a DIV, e.g., `zenscroll.createScroller(myDiv, null, 0)` | ||
@@ -208,3 +207,3 @@ | ||
| var defaultDuration = 500 | ||
| var edgeOffset = 4 | ||
| var edgeOffset = 30 | ||
| var myDiv = document.getElementById("container") | ||
@@ -224,3 +223,3 @@ var myScroller = zenscroll.createScroller(myDiv, defaultDuration, edgeOffset) | ||
| ````js | ||
| myScroller.intoView(target, 750) | ||
| myScroller.intoView(target) | ||
| ```` | ||
@@ -227,0 +226,0 @@ |
@@ -1,1 +0,1 @@ | ||
| !function(t,e){"function"==typeof define&&define.amd?define([],e()):"object"==typeof module&&module.exports?module.exports=e():t.zenscroll=e()}(this,function(){"use strict";var t=function(t,e,o){e=e||999,o&&0===o||(o=9);var n,i=document.documentElement,r=function(){return"getComputedStyle"in window&&"smooth"===window.getComputedStyle(t?t:document.body)["scroll-behavior"]},c=function(){return t?t.scrollTop:window.scrollY||i.scrollTop},u=function(){return t?Math.min(t.offsetHeight,window.innerHeight):window.innerHeight||i.clientHeight},l=function(e){return t?e.offsetTop-t.offsetTop:e.getBoundingClientRect().top+c()-i.offsetTop},f=function(){clearTimeout(n),n=0},a=function(o,l){if(f(),r())(t||window).scrollTo(0,o);else{var a=c(),s=Math.max(o,0)-a;l=l||Math.min(Math.abs(s),e);var d=(new Date).getTime();!function h(){n=setTimeout(function(){var e=Math.min(((new Date).getTime()-d)/l,1),o=Math.max(Math.floor(a+s*(.5>e?2*e*e:e*(4-2*e)-1)),0);t?t.scrollTop=o:window.scrollTo(0,o),1>e&&u()+o<(t||i).scrollHeight?h():setTimeout(f,99)},9)}()}},s=function(t,e){a(l(t)-o,e)},d=function(t,e){var n=t.getBoundingClientRect().height+2*o,i=u(),r=l(t),f=r+n,d=c();o>r-d||n>i?s(t,e):o>d+i-f&&a(f-i,e)},h=function(t,e,o){a(Math.max(l(t)-u()/2+(o||t.getBoundingClientRect().height/2),0),e)},m=function(t,n){t&&(e=t),(0===n||n)&&(o=n)};return{setup:m,to:s,toY:a,intoView:d,center:h,stop:f,moving:function(){return!!n}}},e=t();if("addEventListener"in window&&"smooth"!==document.body.style.scrollBehavior&&!window.noZensmooth){var o=function(t){try{history.replaceState({},"",window.location.href.split("#")[0]+t)}catch(e){}};window.addEventListener("click",function(t){for(var n=t.target;n&&"A"!==n.tagName;)n=n.parentNode;if(!(!n||1!==t.which||t.shiftKey||t.metaKey||t.ctrlKey||t.altKey)){var i=n.getAttribute("href")||"";if(0===i.indexOf("#"))if("#"===i)t.preventDefault(),e.toY(0),o("");else{var r=n.hash.substring(1),c=document.getElementById(r);c&&(t.preventDefault(),e.to(c),o("#"+r))}}},!1)}return{createScroller:t,setup:e.setup,to:e.to,toY:e.toY,intoView:e.intoView,center:e.center,stop:e.stop,moving:e.moving}}); | ||
| !function(t,e){"function"==typeof define&&define.amd?define([],e()):"object"==typeof module&&module.exports?module.exports=e():t.zenscroll=e()}(this,function(){"use strict";if(!window||!document)return{};var t=function(t,e,n){e=e||999,n||0===n||(n=9);var o,i=document.documentElement,r=function(){return"getComputedStyle"in window&&"smooth"===window.getComputedStyle(t?t:document.body)["scroll-behavior"]},c=function(){return t?t.scrollTop:window.scrollY||i.scrollTop},u=function(){return t?Math.min(t.offsetHeight,window.innerHeight):window.innerHeight||i.clientHeight},f=function(e){return t?e.offsetTop-t.offsetTop:e.getBoundingClientRect().top+c()-i.offsetTop},l=function(){clearTimeout(o),o=0},a=function(n,f){if(l(),r())(t||window).scrollTo(0,n);else{var a=c(),s=Math.max(n,0)-a;f=f||Math.min(Math.abs(s),e);var d=(new Date).getTime();!function m(){o=setTimeout(function(){var e=Math.min(((new Date).getTime()-d)/f,1),n=Math.max(Math.floor(a+s*(.5>e?2*e*e:e*(4-2*e)-1)),0);t?t.scrollTop=n:window.scrollTo(0,n),1>e&&u()+n<(t||i).scrollHeight?m():setTimeout(l,99)},9)}()}},s=function(t,e){a(f(t)-n,e)},d=function(t,e){var o=t.getBoundingClientRect().height+2*n,i=u(),r=f(t),l=r+o-n,d=c();n>r-d||o>i?s(t,e):0>d+i-l&&a(l-i,e)},m=function(t,e,n){a(Math.max(f(t)-u()/2+(n||t.getBoundingClientRect().height/2),0),e)},h=function(t,o){t&&(e=t),(0===o||o)&&(n=o)};return{setup:h,to:s,toY:a,intoView:d,center:m,stop:l,moving:function(){return!!o}}},e=t();if("addEventListener"in window&&"smooth"!==document.body.style.scrollBehavior&&!window.noZensmooth){var n=function(t){try{history.replaceState({},"",window.location.href.split("#")[0]+t)}catch(e){}};window.addEventListener("click",function(t){for(var o=t.target;o&&"A"!==o.tagName;)o=o.parentNode;if(!(!o||1!==t.which||t.shiftKey||t.metaKey||t.ctrlKey||t.altKey)){var i=o.getAttribute("href")||"";if(0===i.indexOf("#"))if("#"===i)t.preventDefault(),e.toY(0),n("");else{var r=o.hash.substring(1),c=document.getElementById(r);c&&(t.preventDefault(),e.to(c),n("#"+r))}}},!1)}return{createScroller:t,setup:e.setup,to:e.to,toY:e.toY,intoView:e.intoView,center:e.center,stop:e.stop,moving:e.moving}}); |
| /** | ||
| * Zenscroll 3.0.1 | ||
| * Zenscroll 3.0.2 | ||
| * https://github.com/zengabor/zenscroll/ | ||
@@ -39,17 +39,22 @@ * | ||
| (function (root, zenscroll) { | ||
| (function (root, factory) { | ||
| if (typeof define === "function" && define.amd) { | ||
| define([], zenscroll()) | ||
| define([], factory()) | ||
| } else if (typeof module === "object" && module.exports) { | ||
| module.exports = zenscroll() | ||
| module.exports = factory() | ||
| } else { | ||
| root.zenscroll = zenscroll() | ||
| root.zenscroll = factory() | ||
| } | ||
| }(this, function () { | ||
| "use strict" | ||
| // Exit if it’s not a browser environment: | ||
| if (!window || !document) { | ||
| return {} | ||
| } | ||
| var createScroller = function (scrollContainer, defaultDuration, edgeOffset) { | ||
| defaultDuration = defaultDuration || 999 //ms | ||
| if (!edgeOffset || edgeOffset !== 0) { | ||
| if (!edgeOffset && edgeOffset !== 0) { | ||
| // When scrolling, this amount of distance is kept from the edges of the scrollContainer: | ||
@@ -152,3 +157,3 @@ edgeOffset = 9 //px | ||
| var elemTop = getRelativeTopOf(elem) | ||
| var elemBottom = elemTop + elemScrollHeight | ||
| var elemBottom = elemTop + elemScrollHeight - edgeOffset | ||
| var scrollTop = getScrollTop() | ||
@@ -158,3 +163,3 @@ if ((elemTop - scrollTop) < edgeOffset || elemScrollHeight > vHeight) { | ||
| scrollToElem(elem, duration) | ||
| } else if ((scrollTop + vHeight - elemBottom) < edgeOffset) { | ||
| } else if ((scrollTop + vHeight - elemBottom) < 0) { | ||
| // Element is clipped at the bottom. | ||
@@ -213,3 +218,3 @@ scrollToY(elemBottom - vHeight, duration) | ||
| var defaultScroller = createScroller() | ||
| // Create listeners for the documentElement only & exclude IE8- | ||
@@ -229,2 +234,3 @@ if ("addEventListener" in window && document.body.style.scrollBehavior !== "smooth" && !window.noZensmooth) { | ||
| } | ||
| // Only handle links that were clicked with the primary button, without modifier keys: | ||
| if (!anchor || event.which !== 1 || event.shiftKey || event.metaKey || event.ctrlKey || event.altKey) { | ||
@@ -236,3 +242,3 @@ return | ||
| if (href === "#") { | ||
| event.preventDefault() // Prevent the browser from handling the activation of the link | ||
| event.preventDefault() | ||
| defaultScroller.toY(0) | ||
@@ -244,3 +250,3 @@ replaceUrl("") | ||
| if (targetElem) { | ||
| event.preventDefault() // Prevent the browser from handling the activation of the link | ||
| event.preventDefault() | ||
| defaultScroller.to(targetElem) | ||
@@ -247,0 +253,0 @@ replaceUrl("#" + targetId) |
No alert changes
Improved metrics
- Total package byte prevSize
- increased by1.06%
22559
- Lines of code
- increased by2.11%
242
Worsened metrics
- Number of lines in readme file
- decreased by-0.36%
276
No dependency changes