Bug fixes (Transition.scroll)

WITS · Mar 27, 2018 · 1a17fb1 · 1a17fb1
1 parent 4f7017f
commit 1a17fb1
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 14 deletions.
diff --git a/scroll.html b/scroll.html
@@ -98,6 +98,15 @@
 		cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
 		proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
 	</section>
+	<section class='expanded' id='foo'>
+		<header><strong>Foo</strong> Card</header>
+		<p>Lorem ipsum das bar dolor sit amet, consectetur adipisicing elit, sed do eiusmod
+		tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
+		quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+		consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
+		cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
+		proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+	</section>
 	<section class='expanded'>
 		<header>Card</header>
 		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
@@ -125,8 +134,11 @@
 		proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
 	</section>
 	<div id='buttons'>
-		<button onclick='Transition.scroll({ per100: 30, align: "bottom" })'>Down</button>
-		<button onclick='Transition.scroll({ per100: 30 })'>Up</button>
+		<button onclick='Transition.scroll({ per100: 30 })'>Page Top</button>
+		<button onclick='Transition.scroll(100, 500)'>100px</button>
+		<button onclick='Transition.scroll(document.getElementById("foo"), { per100: 30 })'>#Foo Top</button>
+		<button onclick='Transition.scroll(document.getElementById("foo"), { per100: 30, align: "bottom" })'>#Foo Bottom</button>
+		<button onclick='Transition.scroll({ per100: 30, align: "bottom" })'>Page Bottom</button>
 	</div>
 </body>
 </html>
diff --git a/transition.js b/transition.js
@@ -203,12 +203,21 @@ Transition = {
 			this.scrollEndY = end;
 		} else if (end instanceof Element) {
 			// Get the correct property of this element
-			this.scrollEndY = elem.getBoundingClientRect()[options.align || 'top'] +
+			var rect = end.getBoundingClientRect();
+			this.scrollEndY = rect[options.align || 'top'] +
 				this.scrollPosition(this.scrollElement);
+			if (options.align === 'bottom') {
+				if (this.scrollElement === window) {
+					this.scrollEndY -= window.innerHeight;
+				} else {
+					this.scrollEndY -= this.scrollElement.getBoundingClientRect().height;
+				}
+			}
 		} else {
 			// Get the scroll position from the window
 			if (options.align === 'bottom') {
-				this.scrollEndY = document.documentElement.scrollHeight;
+				this.scrollEndY = document.documentElement.scrollHeight -
+					window.innerHeight;
 			} else {
 				this.scrollEndY = 0;
 			}
@@ -217,13 +226,6 @@ Transition = {
 		// Calculate the scroll distance
 		this.scrollDistance = this.scrollEndY -
 			this.scrollPosition(this.scrollElement);
-		if (this.scrollDistance > 0) {
-			if (this.scrollElement === window) {
-				this.scrollDistance -= window.innerHeight;
-			} else {
-				this.scrollDistance -= this.scrollElement.getBoundingClientRect().height;
-			}
-		}
 
 		// If the scroll distance is 0, stop here
 		if (this.scrollDistance === 0) {
@@ -238,6 +240,8 @@ Transition = {
 		}
 
 		// Set other properties and begin scroll loop
+		this.scrollInitialY = this.scrollPosition(this.scrollElement);
+		this.scrollInitialT = Date.now();
 		this.scrollPrevT = Date.now();
 		this.isScrolling = true;
 
@@ -268,13 +272,14 @@ Transition = {
 		if (delta != 0) {
 			var scrollY = $this.scrollPosition($this.scrollElement);
 			// var diff = $this.scrollEndY - scrollY;
-			var move = $this.scrollDistance * (delta / $this.scrollDuration);
+			var move = $this.scrollDistance * Math.min(($this.scrollPrevT - $this.scrollInitialT) /
+				$this.scrollDuration, 1);
 
-			$this.scrollTo(scrollY + move);
+			$this.scrollTo($this.scrollInitialY + move);
 
 			var newY = $this.scrollPosition($this.scrollElement);
 
-			if (scrollY === newY) {
+			if (scrollY === newY || $this.scrollPrevT - $this.scrollInitialT > $this.scrollDuration) {
 				$this.isScrolling = false;
 			}
 		}