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)

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();
                            }

                        }
            });
        };
});

9 comments:

  1. Thank you so much for sharing this. good job

    ReplyDelete
  2. Thank you, great directives!
    Can these two be combined into one and can this be applyed on an iframe? I'm trying but it doesn't seem to work.

    ReplyDelete
  3. This comment has been removed by the author.

    ReplyDelete
  4. Thanks man! its a great help

    ReplyDelete
  5. what 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?
    please suggest the the solution if possible Mr. Srinivas.

    ReplyDelete

Blogroll

Popular Posts