angular.module('dragScroll', []).directive('dragScroll', function () { return { restrict: 'A', link: function (scope, elem) { var curPos = 0, momentum = 0, curDown = false, timestamp; elem = elem[0]; elem.addEventListener('mousemove', function (e) { if (curDown === true) { elem.scrollLeft += momentum = curPos - (curPos = e.pageX); } }); elem.addEventListener('mousedown', function (e) { curDown = true; curPos = e.pageX; momentum = 0; e.preventDefault(); }); elem.addEventListener('mouseup', mouseup); elem.addEventListener('mouseleave', mouseup); elem.addEventListener('click', function (e) { if (momentum) { e.preventDefault(); } }); function mouseup(e) { curDown = false; timestamp = Date.now(); window.requestAnimationFrame && window.requestAnimationFrame(autoScroll); } function autoScroll() { var elapsed = Date.now() - timestamp; var delta = momentum * Math.exp(-elapsed / 250); elem.scrollLeft += delta; if (delta > 1 || delta < -1) { window.requestAnimationFrame(autoScroll); } } }, }; });