diff --git a/dragscroll.js b/dragscroll.js index d99cc3f..67e3076 100644 --- a/dragscroll.js +++ b/dragscroll.js @@ -1,9 +1,9 @@ /** * @fileoverview dragscroll - scroll area by dragging * @version 0.0.5 - * + * * @license MIT, see http://github.com/asvd/intence - * @copyright 2015 asvd + * @copyright 2015 asvd */ @@ -25,6 +25,56 @@ var addEventListener = 'add'+EventListener; var removeEventListener = 'remove'+EventListener; + var ticking = false; + var current = {x:0, y:0}; + var last = {x:0, y:0}; + var velocity = {x:0, y:0}; + var timestamp; + var animation = 0; + + function start_ticker(){ + ticking = true; + tick(); + } + + function stop_ticker(){ + clearTimeout(ticking); + ticking = false; + timestamp = Date.now(); + animation = requestAnimationFrame(autoScroll); + } + + function tick(){ + if(ticking){ + ticking = setTimeout(tick, 100); + velocity.x = last.x - current.x; + velocity.y = last.y - current.y; + last.x = current.x; + last.y = current.y; + } + } + + var timeConstant = 125; // ms + + function scroll(x,y){ + window.scrollBy(x, y); + } + function autoScroll() { + var elapsed, delta = {x:0, y:0}, dampening; + target = {x: -0, y: -0}; + + if (velocity.x || velocity.y) { + elapsed = Date.now() - timestamp; + dampening = 1.5 * Math.exp(-elapsed / timeConstant) + delta.x = -velocity.x * dampening; + delta.y = -velocity.y * dampening; + if (delta.x > 10 || delta.x < -10) { + scroll(delta.x, delta.y); + requestAnimationFrame(autoScroll); + } + } + } + var dragged = []; var reset = function(i, el) { for (i = 0; i < dragged.length;) { @@ -40,28 +90,37 @@ el[addEventListener]( mousedown, el.md = function(e) { + cancelAnimationFrame(animation); + document.body.classList.add("down"); pushed = 1; lastClientX = e.clientX; lastClientY = e.clientY; + start_ticker(); + e.preventDefault(); e.stopPropagation(); }, 0 ); - + _window[addEventListener]( - mouseup, el.mu = function() {pushed = 0;}, 0 + mouseup, el.mu = function() { + document.body.classList.remove("down"); + stop_ticker(); + pushed = 0; + }, 0 ); - + _window[addEventListener]( mousemove, el.mm = function(e, scroller) { - scroller = el.scroller||el; + scroller = el.scroller || el; if (pushed) { - scroller.scrollLeft -= - (- lastClientX + (lastClientX=e.clientX)); - scroller.scrollTop -= - (- lastClientY + (lastClientY=e.clientY)); + scrollX = lastClientX - (lastClientX=e.clientX); + scrollY = lastClientY - (lastClientY=e.clientY); + scroll(scrollX, scrollY); + current.x += scrollX; + current.y += scrollY; } }, 0 ); @@ -69,7 +128,7 @@ } } - + if (_document.readyState == 'complete') { reset(); } else {