Skip to content

Instantly share code, notes, and snippets.

@dkarzon
Last active August 29, 2015 14:06
Show Gist options
  • Save dkarzon/63f5cd3e55b941ea4f5c to your computer and use it in GitHub Desktop.
Save dkarzon/63f5cd3e55b941ea4f5c to your computer and use it in GitHub Desktop.
Horizontal scrollable angular directive
angular.module('dk.directives')
.directive('dkscrollable', function () {
//<div dkscrollable>
//Handles the scrolling table for the site
function handleWheel(event) {
event.currentTarget.scrollLeft += event.wheelDelta * -1;
event.preventDefault();
};
return {
restrict: 'A',
multiElement: true,
link: function (scope, element, attr) {
var container = element[0];
container.classList.add("scrollable");
if ('onwheel' in container) {
container.addEventListener('wheel', handleWheel, false);
}
else {
container.addEventListener('mousewheel', handleWheel, false);
}
}
};
});
.scrollable {
overflow: auto;
overflow-x: scroll;
overflow-y: hidden;
-ms-scroll-chaining: none;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment