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)
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>
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', 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.ngMouseWheelDown); }); // for IE event.returnValue = false; // for Chrome and Firefox if(event.preventDefault) { event.preventDefault(); } } }); }; });
Thank you so much for sharing this. good job
ReplyDeletethank you! Srinivas
ReplyDeleteThank you, great directives!
ReplyDeleteCan these two be combined into one and can this be applyed on an iframe? I'm trying but it doesn't seem to work.
This comment has been removed by the author.
ReplyDeleteThank you a lot man!
ReplyDeleteThanks man! its a great help
ReplyDeleteAwesome. Thanks much.
ReplyDeletewhat should i have to do if i wish to hide navbar on scroll down and reappear on scrolling up with the help of above directive?
ReplyDeleteplease suggest the the solution if possible Mr. Srinivas.
Thanks it works well for me!
ReplyDelete