3.1.0

README.md

@@ -12,7 +12,7 @@
 
 Smooth animated scrolling. Move elements into view, or scroll to any vertical position.
 
-One kilobyte of pure JavaScript. No dependencies.
+1.1 kilobyte of vanilla JavaScript. No dependencies.
 
 
 ## About
@@ -27,8 +27,9 @@ Features:
 - Scrolling an element into view, making sure both top & bottom are visible, if possible.
 - Scroll to an element and center it on the screen.
 - Customize the duration of the individual scroll operations.
+- If you provide a callback function it will be executed when the scrolling is done.
 - Specify the spacing between the element and the edge of the screen (e.g., for fixed navigation bars and footers).
-- Just 1 kilobyte minimized & gzipped.
+- Just 1.1 kilobyte minimized & gzipped.
 - No dependencies.
 
 Full support tested and works under:
@@ -218,7 +219,34 @@ myScroller.intoView(target)
 ````
 
 
-### 8. Change settings
+### 8. Execute something when the scrolling is done
+
+You can provide a callback function to all four scroll functions, which is executed when the scroll operation is finished. For example, you change some UI elements but first you want to make sure that the relevant elements are visible.
+
+If you look at the code examples above under the previous point, [7. Scroll inside a scrollable DIV](#7.scrollinsideascrollablediv) they are actually implemented like this:
+
+````js
+// Last line of example 1:
+zenscroll.intoView(container, 100, function () { myScroller.center(target) })
+
+// Example 2:
+zenscroll.intoView(container, 100, function () { myScroller.toY(35) })
+
+// Example 3:
+zenscroll.intoView(container, 100, function () { myScroller.intoView(target) })
+````
+
+So first the container (with _ITEM 1_ to _ITEM 7_) is scrolled into view if necessary, and then the scrolling inside the container is performed. Try scrolling out the above container and then hit one of the ‘Play’ buttons above to see how it works.
+
+This works with all four scrolling functions. The `onDone` parameter is always the last parameter:
+
+1. `to(element, duration, onDone)`
+1. `toY(y, duration, onDone)`
+1. `intoView(element, duration, onDone)`
+1. `center(element, duration, offset, onDone)`
+
+
+### 9. Change settings
 
 It’s easy to change the basic parameters of scrolling:
 
@@ -250,7 +278,7 @@ zenscroll.setup(null, 42)
 ````
 
 
-### 9. Controlling the smooth operation
+### 10. Controlling the smooth operation
 
 To check whether a scoll is being performed right now:
 

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "zenscroll",
-	"version": "3.0.2",
+	"version": "3.1.0",
 	"description": "A module to smooth-scroll web pages and DIVs",
 	"main": "zenscroll.js",
 	"files": ["zenscroll.js", "zenscroll-min.js"],

zenscroll.js

@@ -1,5 +1,5 @@
 /**
- * Zenscroll 3.0.2
+ * Zenscroll 3.1.0
  * https://github.com/zengabor/zenscroll/
  *
  * Copyright 2015–2016 Gabor Lenard
@@ -103,10 +103,13 @@
 		 *        If 0 or not provided it is automatically calculated based on the 
 		 *        distance and the default duration.
 		 */
-		var scrollToY = function (endY, duration) {
+		var scrollToY = function (endY, duration, onDone) {
 			stopScroll()
 			if (nativeSmoothScrollEnabled()) {
 				(scrollContainer || window).scrollTo(0, endY)
+				if (onDone) {
+					onDone()
+				}
 			} else {
 				var startY = getScrollTop()
 				var distance = Math.max(endY,0) - startY
@@ -125,6 +128,9 @@
 							loopScroll()
 						} else {
 							setTimeout(stopScroll, 99) // with cooldown time
+							if (onDone) {
+								onDone()
+							}
 						}
 					}, 9)
 				})()
@@ -138,8 +144,8 @@
 		 * @param {duration} Optionally the duration of the scroll operation.
 		 *        A value of 0 is ignored.
 		 */
-		var scrollToElem = function (elem, duration) {
-			scrollToY(getRelativeTopOf(elem) - edgeOffset, duration)
+		var scrollToElem = function (elem, duration, onDone) {
+			scrollToY(getRelativeTopOf(elem) - edgeOffset, duration, onDone)
 		}
 
 		/**
@@ -149,18 +155,20 @@
 		 * @param {duration} Optionally the duration of the scroll operation.
 		 *        A value of 0 is ignored.
 		 */
-		var scrollIntoView = function (elem, duration) {
+		var scrollIntoView = function (elem, duration, onDone) {
 			var elemScrollHeight = elem.getBoundingClientRect().height + 2*edgeOffset
 			var vHeight = getViewHeight()
 			var elemTop = getRelativeTopOf(elem)
 			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)
+				scrollToElem(elem, duration, onDone)
 			} else if ((scrollTop + vHeight - elemBottom) < 0) {
 				// Element is clipped at the bottom.
-				scrollToY(elemBottom - vHeight, duration)
+				scrollToY(elemBottom - vHeight, duration, onDone)
+			} else if (onDone) {
+				onDone()
 			}
 		}
 
@@ -172,13 +180,14 @@
 		 * @param {offset} Optionally the offset of the top of the element from the center of the screen.
 		 *        A value of 0 is ignored.
 		 */
-		var scrollToCenterOf = function (elem, duration, offset) {
+		var scrollToCenterOf = function (elem, duration, offset, onDone) {
 			scrollToY(
 				Math.max(
 					getRelativeTopOf(elem) - getViewHeight()/2 + (offset || elem.getBoundingClientRect().height/2), 
 					0
 				), 
-				duration
+				duration,
+				onDone
 			)
 		}