AngularJS Directive For Mouse Wheel Scroll Event

Wednesday,8 April 2015 | Posted byDasari Srinivas

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

                        }
            });
        };
});

AngularJS Directive For Mouse Wheel Scroll Event