New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →
zenscroll - npm Package Compare versions
Comparing version 0.9.1 to 1.0.0
| { | ||
| "name": "zenscroll", | ||
| "version": "0.9.1", | ||
| "version": "1.0.0", | ||
| "description": "A module to smooth-scroll web pages and container elements", | ||
@@ -5,0 +5,0 @@ "main": "zenscroll.js", |
125
README.md
| <p align="center"> | ||
| <img src="https://zengabor.github.io/zenscroll/zenscroll.png" alt="Zenscroll"> | ||
| <a href="https://zengabor.github.io/zenscroll/"> | ||
| <img src="https://zengabor.github.io/zenscroll/zenscroll.png" alt="Zenscroll"> | ||
| </a> | ||
| </p> | ||
| #### [**Demo**](https://zengabor.github.io/zenscroll/) · [**Download**](https://github.com/zengabor/zenscroll/archive/latest.zip) · [**About**](#about) · [**Install**](#install) · [**How to use**](#how-to-use) · [**License**](#license) | ||
| #### [**Demo**](https://zengabor.github.io/zenscroll/) [**Download**](https://github.com/zengabor/zenscroll/archive/latest.zip) [**About**](#about) [**Install**](#install) [**How to use**](#how-to-use) [**License**](#license) | ||
| # One JavaScript to Smooth-Scroll Them All | ||
| Elegant smooth scrolling on your page. No more abrupt jumps. Move elements into view, center them, or scroll to any Y position. | ||
| Smooth animated scrolling. No more abrupt jumps on your page. | ||
| Move elements into view, center them, or scroll to any Y position. | ||
| 865 bytes of pure JavaScript. No dependencies. | ||
| 870 bytes of pure JavaScript. No dependencies. | ||
| ## About | ||
| Zenscroll is a vanilla JavaScript module that enables animated scrolling to any element or any position within your document or within a scrollable container. | ||
| Zenscroll is a vanilla JavaScript module that enables animated vertical scrolling to any element or any position within your document or within a DIV or other scrollable container. | ||
@@ -21,14 +25,33 @@ Features: | ||
| - Animated scrolling to anchors on the same page. | ||
| - Scroll to a specific element. | ||
| - Scroll to the top of a specific element. | ||
| - Scrolling an element into view, making sure both top & bottom are visible, if possible. | ||
| - Scroll to an element while centering it on the screen. | ||
| - Customize the duration and other parameters. | ||
| - No dependencies. Works great with others. | ||
| - Tiny size: 865 bytes (minimized & gzipped). | ||
| - Tested and works under the latest default browsers on Android, iOS, OS X, Windows. It was also tested on Android 2.2+, Firefox 3.6+, IE6+, iOS Safari 5+, OS X Safari 5+. | ||
| - Customize the duration. | ||
| - Specify the spacing between the element and the edge of the screen (required for fixed navigation bars and footers). | ||
| - No dependencies. | ||
| - Small size: 870 bytes (minimized & gzipped). | ||
| Full support tested and works under: | ||
| - Android Browser 2.2+ | ||
| - Chrome for Android | ||
| - Chrome 14+ (probably earlier too) | ||
| - Edge | ||
| - Firefox 9+ | ||
| - Internet Explorer 9+ | ||
| - iOS Safari 4+ | ||
| - Opera 10.6+ (probably earlier too) | ||
| - Safari 4+ (including Safari 9 on OS X 10.11 beta) | ||
| - Windows Phone 8.1 | ||
| - Yandex 14.12 | ||
| Basic support (animated scroll in document) tested and works under: | ||
| - Firefox 3+ | ||
| - Internet Explorer 6+ | ||
| - iOS Safari 3+ | ||
| ## Install | ||
| Include [Zenscroll](https://github.com/zengabor/zenscroll/archive/latest.zip) into your page. A good place is at the very bottom, just before the closing `</body>` tag. For example: | ||
| [Download Zenscroll](https://github.com/zengabor/zenscroll/archive/latest.zip) and include it into your page. A good place is at the very bottom, just before the closing `</body>` tag. For example: | ||
@@ -44,3 +67,3 @@ ````html | ||
| ```` | ||
| npm install zengabor/zenscroll | ||
| npm install zenscroll | ||
| ```` | ||
@@ -52,8 +75,10 @@ | ||
| If Zenscroll is included in your page it will automatically animate the scrolling to anchors on the same page. | ||
| If Zenscroll is included in your page it will automatically animate the scrolling to anchors on the same page. This works even with content you dynamically load via ajax, as Zenscroll uses a generic click handler. | ||
| Since this is implemented a progressive enhancement, all internal links still work in very old browsers, like IE6, although the jump is not animated. Also note that 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 this is implemented a progressive enhancement, all internal links still work even in very old browsers. Note that internal links are intentionally not added to the history to save the users from having to hit the Back button too many times afterwards. | ||
| If you want, you can opt out of this automatic smoothing: | ||
| If you want some links to be excluded from this, then start with the path of the page. E.g., instead of writing `<a href="#about">` write `<a href="/#about">`. | ||
| You can also disable this automatic smoothing for all internal links by executing: | ||
| ````js | ||
@@ -71,3 +96,3 @@ zenscroll.setup(null, null, true) | ||
| Note that Zenscroll intentionally leaves a few pixels (by default 9px) from the edges of the screen or scolling container. You can globally override this with the `edgeOffset` parameter of the constructor. | ||
| 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. | ||
@@ -132,18 +157,4 @@ ### 3. Scroll to a specific vertical position | ||
| ### 7. Controlling the smooth scroll operation | ||
| ### 7. Scroll inside a scrollable DIV | ||
| To check whether a scoll is being performed right now: | ||
| ````js | ||
| var isScrolling = zenscroll.moving() | ||
| ```` | ||
| To stop the current scrolling: | ||
| ````js | ||
| zenscroll.stop() | ||
| ```` | ||
| ### 8. Scroll inside a scrollable container element | ||
| Anything you can do within the document you can also do inside a scrollable element. You just need to instantiate a new scoller for that element. | ||
@@ -168,3 +179,3 @@ | ||
| var edgeOffset = 4 | ||
| var cScroll = zenscroll.new(c, defaultDuration, edgeOffset) | ||
| var cScroll = zenscroll.newFor(c, defaultDuration, edgeOffset) | ||
| var target = document.getElementById("item4") | ||
@@ -175,3 +186,3 @@ cScroll.center(target) | ||
| Obviously you can use all other scroll methods and parameters with the scrollable container. Two examples: | ||
| Obviously you can use all other scroll methods and parameters with the scrollable container. Two more examples: | ||
@@ -186,2 +197,50 @@ ````js | ||
| ### 8. Change settings | ||
| It’s easy to change the basic parameters of scrolling: | ||
| - You can set the default value for duration. This will be valid for internal scrolls and all your direct scroll calls where you don’t specify a duration. | ||
| - Change the edge offset (the spacing between the element and the screen edge). This is very useful if you have a fixed navigation bar or footer bar: set it to at least the height of your fixed bar. | ||
| - You can also turn on or off the automatic smoothing for internal links. | ||
| ````js | ||
| var defaultDuration = 777 | ||
| var edgeOffset = 42 | ||
| var disableInternalLinkSmoothing = false | ||
| zenscroll.setup(defaultDuration, edgeOffset, disableInternalLinkSmoothing) | ||
| ```` | ||
| If you don’t want to change a value just omit the parameter or pass `null`. For example, the line below sets the default duration, while leaving other settings unchanged: | ||
| ````js | ||
| zenscroll.setup(500) | ||
| ```` | ||
| Sets the the spacing between the edge of the screen (or a DIV) and the target element you are scrolling to, while leaving the default duration unchanged: | ||
| ````js | ||
| zenscroll.setup(null, 5) | ||
| ```` | ||
| Disable the automatic smoothing for internal links, while leaving both other settings unchanged: | ||
| ````js | ||
| zenscroll.setup(null, null, true) | ||
| ```` | ||
| ### 9. Controlling the smooth operation | ||
| To check whether a scoll is being performed right now: | ||
| ````js | ||
| var isScrolling = zenscroll.moving() | ||
| ```` | ||
| To stop the current scrolling: | ||
| ````js | ||
| zenscroll.stop() | ||
| ```` | ||
| ## License | ||
@@ -188,0 +247,0 @@ |
@@ -1,1 +0,1 @@ | ||
| !function(t,e){var n=function i(n,o,c){"use strict";o=o||999,c&&0===c||(c=9);var r,a=e.documentElement,l=function(){return n?n.scrollTop:t.scrollY||a.scrollTop},u=function(){return n?Math.min(n.offsetHeight,t.innerHeight):t.innerHeight||a.clientHeight},f=function(t){return t.offsetTop-(n||a).offsetTop},s=function M(){clearTimeout(r),r=0},h=function(e,i){s();var c=l(),f=Math.max(e,0)-c;i=i||Math.min(Math.abs(f),o);var h=(new Date).getTime();!function g(){r=setTimeout(function(){var e=Math.min(((new Date).getTime()-h)/i,1),o=Math.max(Math.floor(c+f*(.5>e?2*e*e:e*(4-2*e)-1)),0);n?n.scrollTop=o:t.scrollTo(0,o),1>e&&u()+o<(n||a).scrollHeight?g():setTimeout(s,99)},9)}()},g=function H(t,e){h(f(t)-c,e)},m=function k(t,e){var n=t.getBoundingClientRect().height+2*c,i=u(),o=f(t),r=o+n,a=l();c>o-a||n>i?g(t,e):c>a+i-r&&h(r-i,e)},v=function w(t,e,n){h(Math.max(f(t)-u()/2+(n||t.getBoundingClientRect().height/2),0),e)},d=function x(e){t.history.replaceState&&history.replaceState({},"",t.location.href.split("#")[0]+"#"+e)},p=function D(e){var n=e.target,i=n.getAttribute("href")||"";if("A"===n.tagName&&0===i.indexOf("#"))if("#"===i)e.preventDefault(),t.zenscroll.toY(0),d("");else{var o=n.hash.substring(1),c=document.getElementById(o);c&&(e.preventDefault(),t.zenscroll.to(c),d(o))}},T;"addEventListener"in t?(t.addEventListener("click",p,!1),T=function(){t.removeEventListener("click",p,!1)}):t.attachEvent&&(t.attachEvent("onclick",p),T=function(){t.detachEvent("onclick",p)});var E=function b(t,e,n){t&&(o=t),null!==e&&(c=e),n&&T&&(T(),T=null)};return{"new":i,setup:E,to:g,toY:h,intoView:m,center:v,stop:s,moving:function(){return!!r}}};t.zenscroll=n()}(this,document); | ||
| !function(t,e){var n=function i(n,o,c){"use strict";o=o||999,c&&0===c||(c=9);var r,a=e.documentElement,l=function(){return n?n.scrollTop:t.scrollY||a.scrollTop},u=function(){return n?Math.min(n.offsetHeight,t.innerHeight):t.innerHeight||a.clientHeight},f=function(t){return t.offsetTop-(n||a).offsetTop},s=function M(){clearTimeout(r),r=0},h=function(e,i){s();var c=l(),f=Math.max(e,0)-c;i=i||Math.min(Math.abs(f),o);var h=(new Date).getTime();!function g(){r=setTimeout(function(){var e=Math.min(((new Date).getTime()-h)/i,1),o=Math.max(Math.floor(c+f*(.5>e?2*e*e:e*(4-2*e)-1)),0);n?n.scrollTop=o:t.scrollTo(0,o),1>e&&u()+o<(n||a).scrollHeight?g():setTimeout(s,99)},9)}()},g=function H(t,e){h(f(t)-c,e)},m=function k(t,e){var n=t.getBoundingClientRect().height+2*c,i=u(),o=f(t),r=o+n,a=l();c>o-a||n>i?g(t,e):c>a+i-r&&h(r-i,e)},v=function w(t,e,n){h(Math.max(f(t)-u()/2+(n||t.getBoundingClientRect().height/2),0),e)},d=function x(e){t.history.replaceState&&history.replaceState({},"",t.location.href.split("#")[0]+"#"+e)},p=function D(e){var n=e.target,i=n.getAttribute("href")||"";if("A"===n.tagName&&0===i.indexOf("#"))if("#"===i)e.preventDefault(),t.zenscroll.toY(0),d("");else{var o=n.hash.substring(1),c=document.getElementById(o);c&&(e.preventDefault(),t.zenscroll.to(c),d(o))}},T;n||("addEventListener"in t?(t.addEventListener("click",p,!1),T=function(){t.removeEventListener("click",p,!1)}):t.attachEvent&&(t.attachEvent("onclick",p),T=function(){t.detachEvent("onclick",p)}));var E=function b(t,e,n){t&&(o=t),null!==e&&(c=e),n&&T&&(T(),T=null)};return{newFor:i,setup:E,to:g,toY:h,intoView:m,center:v,stop:s,moving:function(){return!!r}}};t.zenscroll=n()}(this,document); |
@@ -1,3 +0,3 @@ | ||
| /*! | ||
| * Zenscroll 0.9.1 | ||
| /** | ||
| * Zenscroll 1.0.0 | ||
| * https://github.com/zengabor/zenscroll/ | ||
@@ -66,15 +66,2 @@ * | ||
| // if (scrollContainer) { | ||
| // // docHeight = function () { return scrollContainer.scrollHeight } | ||
| // } else { | ||
| // getScrollTop = function () { return win.scrollY || docElem.scrollTop } | ||
| // getViewHeight = function () { return win.innerHeight || docElem.clientHeight } | ||
| // // docHeight = function () { | ||
| // // var body = doc.body | ||
| // // return doc.body.scrollHeight | ||
| // // console.log(body.scrollHeight, de.scrollHeight, body.offsetHeight, de.offsetHeight, body.clientHeight, de.clientHeight) | ||
| // // return Math.max(body.scrollHeight, de.scrollHeight, body.offsetHeight, de.offsetHeight, body.clientHeight, de.clientHeight) | ||
| // // } | ||
| // } | ||
| /** | ||
@@ -88,5 +75,2 @@ * Immediately stops the current smooth scroll operation | ||
| // var getScrollTop = function () { return scrollContainer.scrollTop } | ||
| // var getViewHeight = function () { return Math.min(scrollContainer.offsetHeight, window.innerHeight) } | ||
| /** | ||
@@ -201,8 +185,10 @@ * Scrolls to a specific vertical position in the document. | ||
| var removeEventListener | ||
| if ("addEventListener" in win) { | ||
| win.addEventListener("click", internalLinkHandler, false) | ||
| removeEventListener = function () { win.removeEventListener("click", internalLinkHandler, false) } | ||
| } else if (win.attachEvent) { | ||
| win.attachEvent("onclick", internalLinkHandler) | ||
| removeEventListener = function () { win.detachEvent("onclick", internalLinkHandler) } | ||
| if (!scrollContainer) { | ||
| if ("addEventListener" in win) { | ||
| win.addEventListener("click", internalLinkHandler, false) | ||
| removeEventListener = function () { win.removeEventListener("click", internalLinkHandler, false) } | ||
| } else if (win.attachEvent) { | ||
| win.attachEvent("onclick", internalLinkHandler) | ||
| removeEventListener = function () { win.detachEvent("onclick", internalLinkHandler) } | ||
| } | ||
| } | ||
@@ -224,3 +210,3 @@ | ||
| return { | ||
| new: makeScroller, | ||
| newFor: makeScroller, | ||
| setup: setup, | ||
@@ -227,0 +213,0 @@ to: scrollToElem, |
Fixed alerts
No v1
QualityPackage is not semver >=1. This means it is not stable and does not support ^ ranges.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by8%
18438
- Number of low quality alerts
- decreased by-100%
0
- Number of lines in readme file
- increased by31.38%
247
Worsened metrics
- Lines of code
- decreased by-5.69%
199
No dependency changes