3.0.2

- Fixes #11: now edgeOffset can be customized (earlier it was always
9px)
- Fix for inaccurate calculation of bottom edge when using `intoView()`
(earlier twice the amount of edgeOffset was used at the bottom)
- Fixes #9: Make sure it doesn’t throw an exception when called in a
non-browser environment (e.g., server rendered React)

README.md

@@ -12,7 +12,7 @@
 
 Smooth animated scrolling. Move elements into view, or scroll to any vertical position.
 
-1 kilobyte of pure JavaScript. No dependencies.
+One kilobyte of pure JavaScript. No dependencies.
 
 
 ## About
@@ -21,7 +21,8 @@ Zenscroll is a vanilla JavaScript module that enables animated vertical scrollin
 
 Features:
 
-- 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.
 - Scrolling an element into view, making sure both top & bottom are visible, if possible.
 - Scroll to an element and center it on the screen.
@@ -73,12 +74,10 @@ npm install zenscroll
 If you want to leverage the native smooth-scrolling by the browser (currently available in Firefox 36+ and Chrome 49+) then set the [`scroll-behavior` CSS property](https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-behavior) to `smooth` on the body and on the elements you want to scroll. E.g.,
 
 ````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. 
-
-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.
+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.
 
 ### Disabling automatic smoothing on local links
 
@@ -100,14 +99,14 @@ If you want to use Zenscroll programmatically but you don’t need the automatic
 
 If Zenscroll is included in your page it will automatically animate the scrolling to anchors on the same page. 
 
-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.
 
 
 ### 2. Scroll to the top of an element
@@ -117,7 +116,7 @@ var about = document.getElementById("about")
 zenscroll.to(about)
 ````
 
-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)`
 
 
 ### 3. Scroll to a specific vertical position
@@ -200,7 +199,7 @@ Example:
 
 <script>
   var defaultDuration = 500
-  var edgeOffset = 4
+  var edgeOffset = 30
   var myDiv = document.getElementById("container")
   var myScroller = zenscroll.createScroller(myDiv, defaultDuration, edgeOffset)
   var target = document.getElementById("item4")
@@ -215,7 +214,7 @@ myScroller.toY(35)
 ````
 
 ````js
-myScroller.intoView(target, 750)
+myScroller.intoView(target)
 ````
 
 

zenscroll.js

@@ -1,5 +1,5 @@
 /**
- * Zenscroll 3.0.1
+ * Zenscroll 3.0.2
  * https://github.com/zengabor/zenscroll/
  *
  * Copyright 2015–2016 Gabor Lenard
@@ -36,21 +36,26 @@
 /*global define, module */
 
 
-(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:
 			edgeOffset = 9 //px
 		}
@@ -148,12 +153,12 @@
 			var elemScrollHeight = elem.getBoundingClientRect().height + 2*edgeOffset
 			var vHeight = getViewHeight()
 			var elemTop = getRelativeTopOf(elem)
-			var elemBottom = elemTop + elemScrollHeight
+			var elemBottom = elemTop + elemScrollHeight - edgeOffset
 			var scrollTop = getScrollTop()
 			if ((elemTop - scrollTop) < edgeOffset || elemScrollHeight > vHeight) {
 				// Element is clipped at top or is higher than screen.
 				scrollToElem(elem, duration)
-			} else if ((scrollTop + vHeight - elemBottom) < edgeOffset) {
+			} else if ((scrollTop + vHeight - elemBottom) < 0) {
 				// Element is clipped at the bottom.
 				scrollToY(elemBottom - vHeight, duration)
 			}
@@ -207,7 +212,7 @@
 
 	// Create a scroller for the browser window, omitting parameters:
 	var defaultScroller = createScroller()
-	
+
 	// Create listeners for the documentElement only & exclude IE8-
 	if ("addEventListener" in window && document.body.style.scrollBehavior !== "smooth" && !window.noZensmooth) {
 		var replaceUrl = function (hash) {
@@ -222,20 +227,21 @@
 			while (anchor && anchor.tagName !== "A") {
 				anchor = anchor.parentNode
 			}
+			// 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) {
 				return
 			}
 			var href = anchor.getAttribute("href") || ""
 			if (href.indexOf("#") === 0) {
 				if (href === "#") {
-					event.preventDefault() // Prevent the browser from handling the activation of the link
+					event.preventDefault()
 					defaultScroller.toY(0)
 					replaceUrl("")
 				} else {
 					var targetId = anchor.hash.substring(1)
 					var targetElem = document.getElementById(targetId)
 					if (targetElem) {
-						event.preventDefault() // Prevent the browser from handling the activation of the link
+						event.preventDefault()
 						defaultScroller.to(targetElem)
 						replaceUrl("#" + targetId)
 					}