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)
@H_403_70@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 = @H_724_84@math.@H_369_110@max(-1,@H_724_84@math.@H_369_110@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();
}
}
});
};
});
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)
Directive for Mouse Wheel Scroll Up
HTML Usage
<div ng-mouse-wheel-up="..expression here..">........</div>