diff --git a/demo/index-javascript.html b/demo/index-javascript.html new file mode 100644 index 0000000..2aac82e --- /dev/null +++ b/demo/index-javascript.html @@ -0,0 +1,94 @@ + + + + ScrollIt.js by @ChrisPolis + + + + + + + +
+ +
+
+
+

ScrollIt.js

+ + + +

About

+

ScrollIt.js(scroll•it•dot•js) makes it easy to make scrolling pages like this one or add scrolling functionality to existing pages. Here's a brief blog plost explaining it.

+

This is why it rocks:

+ +
+
+
+
+

Usage

+

+ 1) Include jQuery and scrollIt.js + +

+

+ 2) Put a data-scroll-index attribute on each section + +

+

+ 3) Put corresponding data-scroll-nav attributes on each nav element + +

+

+ 4) For links to sections, put on a data-scroll-goto attribute + +

+

+ 5) Call scrollIt() + +

+

View the source of this page for an example

+
+
+
+
+

Options

+

To customize scrollIt.js, simply pass in an options object: (defaults shown)

+ +
+
+
+
+

Credit

+

ScrollIt.js was created by @ChrisPolis.

+

Feel free to use, share and fork it. It's on Github.

+

Enjoy!

+

+ Back to top +

+
+
+ + + diff --git a/scrollIt.javascript.js b/scrollIt.javascript.js new file mode 100644 index 0000000..0998a59 --- /dev/null +++ b/scrollIt.javascript.js @@ -0,0 +1,147 @@ +if (!NodeList.prototype.forEach) { + var forEach = function (array, callback, scope) { + for (var i = 0; i < array.length; i++) { + callback.call(scope, i, array[i]); // passes back stuff we need + } + }; +} + +(function(){ + 'use strict'; + // forEach method + var scroll = function(options){ + var self = {}; + self.options = options; + var animation = null; + var active = 0, + NodeListEl = document.querySelectorAll('[data-scroll-index]'), + lastIndex = NodeListEl[NodeListEl.length-1].dataset.scrollIndex; + + var navigate = function(ndx){ + if(ndx < 0 || ndx > lastIndex) return; + var targetTop = document.querySelector('[data-scroll-index="'+ ndx + '"]').offsetTop + self.options.topOffset, + distance = targetTop - window.scrollY, + //Define speed to ensure scroll consistancy whether it's scrolling betweem two far away position or two very close position + scrollSpeed = self.options.speed; + //requestAnimationFrame(scrollit); + scrollit(); + + + function scrollit(){ + distance = targetTop - window.scrollY; + if (distance > 0){ + window.scrollBy(0, scrollSpeed); + if(distance < scrollSpeed ) { + distance = 0; + window.scrollTo(0, targetTop); + return; + } + requestAnimationFrame(scrollit); + } + if (distance < 0){ + window.scrollBy(0, -scrollSpeed); + if(distance > - scrollSpeed) { + distance = 0; + window.scrollTo(0, targetTop); + return; + } + requestAnimationFrame(scrollit); + } + if (distance == 0){ + return; + } + + }; + }; + self.doScroll = function(e){ + + var target = e.target.dataset.scrollNav; + navigate(target); + + }; + + function watchActive(){ + var winTop = window.pageYOffset; + //padding at top of the highest element + const padding = 16; + + function isVisible(node){ + return (winTop + padding) >= node.offsetTop + self.options.topOffset && + (winTop + padding) < node.offsetTop + (self.options.topOffset) + node.offsetHeight; + + } + + var nodeList = [].slice.call(document.querySelectorAll("[data-scroll-index]")).filter(isVisible); + if(nodeList.length > 0){ + var newActive = nodeList[0].dataset.scrollIndex; + updateActive(newActive); + + } + }; + + function updateActive(ndx){ + active = ndx; + var navItem = document.querySelectorAll('[data-scroll-nav]'); + forEach(navItem, function(key, value){ + value.classList.remove(self.options.activeClass); + }) + document.querySelector('[data-scroll-nav= "'+ ndx +'"]').classList.add(self.options.activeClass); + + + }; + /** + * keyNavigation + * + * sets up keyboard navigation behavior + */ + + //problem + var keyNavigation = function (e) { + var key = e.which; + if(key == self.options.upKey && active > 0) { + navigate(parseInt(active) - 1); + return false; + } else if(key == self.options.downKey && active < lastIndex) { + console.log(lastIndex); + navigate(parseInt(active) + 1); + return false; + } + return true; + }; + + window.onscroll = function(){ + watchActive(); + }; + + window.onkeydown = function(e){ + keyNavigation(e); + + }; + + return self; + } +window.scroll = scroll; + +})(); + +var s = scroll({ + upKey: 38, + downKey: 40, + scrollTime: 500, + activeClass: 'bg-aqua', + topOffset : 0, + speed: 10, +}); + + +var tar = document.querySelectorAll('[data-scroll-nav]'); +forEach(tar, function(key, value){ + value.addEventListener("click", function(e){ + e.preventDefault(); + s.doScroll(e); + + }) + +}); + +