From 82a7cee6cfb9135d03ba181d954685c058d081f4 Mon Sep 17 00:00:00 2001
From: BillyNate <billynate@billynate.com>
Date: Fri, 21 Mar 2014 08:45:07 +0100
Subject: [PATCH] Added the possibility to scroll within sections. In case a
 section is larger than the screen.

---
 example/index.html                |  2 +
 src/css/jquery.scrollSections.css |  8 +++-
 src/js/jquery.scrollSections.js   | 64 +++++++++++++++++++++----------
 3 files changed, 52 insertions(+), 22 deletions(-)

diff --git a/example/index.html b/example/index.html
index 53d71f4..d43d6b5 100755
--- a/example/index.html
+++ b/example/index.html
@@ -24,6 +24,7 @@
 </section>
 
 <section id="about" class="scrollsections">
+<div class="filler"></div>
 </section>
 
 <section id="works" class="scrollsections">
@@ -33,6 +34,7 @@
 </section>
 
 <section id="other" class="scrollsections">
+<div class="filler"></div>
 </section>
 
 <section id="clients" class="scrollsections">
diff --git a/src/css/jquery.scrollSections.css b/src/css/jquery.scrollSections.css
index 2369b98..17b8607 100644
--- a/src/css/jquery.scrollSections.css
+++ b/src/css/jquery.scrollSections.css
@@ -10,7 +10,13 @@ body {
   display: block;
   position: relative;
   width: 100%;
-  height: 100%;
+  height: auto;
+  min-height: 100%;
+}
+.filler {
+  position: relative;
+  width: 100%;
+  height: 2000px;
 }
 #scrollsections-navigation {
   position: fixed;
diff --git a/src/js/jquery.scrollSections.js b/src/js/jquery.scrollSections.js
index 7000611..9813392 100644
--- a/src/js/jquery.scrollSections.js
+++ b/src/js/jquery.scrollSections.js
@@ -43,6 +43,8 @@
 		animateScrollToFirstSection: false,
 		// Create navigation? If the option navigation is set to false, this will have no effect!
 		createNavigation: true,
+		// Be able to scroll within the sections? If sections aren't larger than 100% of the wrapper, this will have no effect!
+		inSectionScroll: true,
 		// The animation speed.
 		speed: 500,
 		// Throw execption if something goes wrong.
@@ -89,6 +91,7 @@
 		this._isAnimated = false;
 		this._wheelDelay = null;
 		this._scrollPaused = false;
+		this._scrollDiff = 114;
 		this._$nav = null;
 		this._ltIE9 = false;
 
@@ -233,7 +236,7 @@
 						}
 					}
 				}
-				if (nextStep > -1) {
+				if (self._currentStep != nextStep && nextStep > -1) {
 					self.customScrollTo(nextStep);
 				}
 			});
@@ -348,12 +351,17 @@
 			var speed;
 
 			if (index != null && index >= 0 && index < this._sections) {
-				this._currentStep = index;
 
 				this._$previousSection = this._$currentSection;
 				this._$currentSection = this._$sections[index];
 
-				yTo = this._$currentSection.offset().top;
+				if (index < self._currentStep) {
+					yTo = this._$currentSection.offset().top + this._$currentSection.height() - self._$htmlBody.outerHeight();
+				}
+				else {
+					yTo = this._$currentSection.offset().top;
+				}
+				this._currentStep = index;
 				speed = noAnimation ? 0 : this.options.speed;
 
 				// Mark any link on the page that refers to our active section active.
@@ -421,11 +429,10 @@
 			}
 
 			this._$window.mousewheel(function (event, delta, deltaX, deltaY) {
+				var scrollTop = self._$htmlBody.scrollTop() || self._$window.scrollTop();
 				var stepDiff = null;
 				var nextStep = -1;
 
-				event.preventDefault();
-
 				// Only scroll if we are not animating and scrolling is not paused.
 				if (!(self._isAnimated && self._scrollPaused)) {
 
@@ -434,31 +441,46 @@
 					// Scroll Down
 					if (deltaY < 0) {
 
-						// Only allow the user to scroll down the maximum sections as defined in our options.
-						if (deltaY < -self.options.scrollMax) {
-							deltaY = -self.options.scrollMax;
-						}
+						if (self._currentStep + 1 < self._sections) {
 
-						if ((!nextStep || !stepDiff || deltaY < stepDiff) && ((self._currentStep - deltaY) < self._sections)) {
-							stepDiff = deltaY;
-							nextStep = self._currentStep - stepDiff;
+							// Only allow the user to scroll down the maximum sections as defined in our options.
+							if (deltaY < -self.options.scrollMax) {
+								deltaY = -self.options.scrollMax;
+							}
+
+							if (self.options.inSectionScroll && (scrollTop + self._$htmlBody.outerHeight() - (deltaY * self._scrollDiff) > self._$sections[self._currentStep + 1].offset().top)) {
+								nextStep = self._currentStep + 1;
+								stepDiff = true;
+							} else if (!self.options.inSectionScroll && ((!nextStep || !stepDiff || deltaY < stepDiff) && ((self._currentStep - deltaY) < self._sections))) {
+								stepDiff = deltaY;
+								nextStep = self._currentStep - stepDiff;
+							}
 						}
 					}
 					// Scroll Up
 					else {
 
-						// Only allow the user to scroll up the maximum sections as defined in our options.
-						if (deltaY > self.options.scrollMax) {
-							deltaY = self.options.scrollMax;
-						}
+						if (self._currentStep > 0) {
+
+							// Only allow the user to scroll up the maximum sections as defined in our options.
+							if (deltaY > self.options.scrollMax) {
+								deltaY = self.options.scrollMax;
+							}
 
-						if ((!nextStep || !stepDiff || deltaY > stepDiff) && ((self._currentStep - deltaY) > -1)) {
-							stepDiff = deltaY;
-							nextStep = self._currentStep - stepDiff;
+							if (self.options.inSectionScroll && (scrollTop - (deltaY * self._scrollDiff) < self._$sections[self._currentStep].offset().top)) {
+								nextStep = self._currentStep - 1;
+								stepDiff = true;
+							} else if (!self.options.inSectionScroll && ((!nextStep || !stepDiff || deltaY > stepDiff) && ((self._currentStep - deltaY) > -1))) {
+								stepDiff = deltaY;
+								nextStep = self._currentStep - stepDiff;
+							}
 						}
 					}
 
 					if (stepDiff && nextStep > -1) {
+
+						event.preventDefault();
+
 						if (self._wheelDelay) {
 							clearTimeout(self._wheelDelay);
 						}
@@ -470,10 +492,10 @@
 						} else {
 							self.mousewheelScrollTo(nextStep);
 						}
+
+						return false;
 					}
 				}
-
-				return false;
 			});
 
 			return this;