AngularJS Directive For Mouse Wheel Scroll Event

AngularJS Directive For Mouse Wheel Scroll Event

Wednesday, 8 April 2015  |   Posted by Dasari Srinivas

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

                        }
            });
        };
});