83
I found a way to implement mouse wheel scroll event with hamster.js which is complicated and costly process. So I came up with simple solution with less code. Here I have created two directives,one is for mouse scroll up event and another is for mouse scroll down event.
You can use these directives for image zoom-in and zoom-out as like shown in
this article. Element binds to event
DOMMouseScroll (for firefox
),mousewheel( for chrome),onmousewheel(for IE)
DEMO
Directive for Mouse Wheel Scroll Up
HTML Usage
<div ng-mouse-wheel-up="..expression here..">........</div>
Script
myApp.directive('ngMouseWheelUp',function() { return function(scope,element,attrs) { element.bind("DOMMouseScroll mousewheel onmousewheel",function(event) { // cross-browser wheel delta var event = window.event || event; // old IE support var delta = Math.max(-1,Math.min(1,(event.wheelDelta || -event.detail))); if(delta > 0) { scope.$apply(function(){ scope.$eval(attrs.ngMouseWheelUp); }); // for IE event.returnValue = false; // for Chrome and Firefox if(event.preventDefault) { event.preventDefault(); } } }); }; });
Directive for Mouse Wheel Scroll Down
HTML Usage
<div ng-mouse-wheel-down="..expression here..">........</div>
Script
myApp.directive('ngMouseWheelDown',(event.wheelDelta || -event.detail))); if(delta < 0) { scope.$apply(function(){ scope.$eval(attrs.ngMouseWheelDown); }); // for IE event.returnValue = false; // for Chrome and Firefox if(event.preventDefault) { event.preventDefault(); } } }); }; });