Horizontal scroll use mousewheel in AngularJS

Not much to explain, Here is the code:

angular.
module('myApp', []).
directive('horizontalScroll', function () {

    return {
    link:function (scope, element, attrs) {
    var base = 0
      
       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)));
        	
        	        		
                        scope.$apply(function(){
                            base+=30*delta;
                            element.children().css({'transform':'translateX('+base+'px)'});
                        });
                    	
                        // for IE
                        event.returnValue = false;
                        // for Chrome and Firefox
                        if(event.preventDefault) {
                        	event.preventDefault();                        
                        }

                    
        });
    }
    };
});

And here is a jsfiddle you can play around.

One more thing

bound check! If you tried the jsfiddle, you may found that the child will go out of the parent div. How to fix?? Here is the fixed code :

var windowWidth = $window.innerWidth;

var listWidth = lodash.sumBy(element.children(), function(c) { return c.offsetWidth });

scope.$apply(function(){
if (-base + windowWidth <= listWidth) {
     base+=20*delta;
} else {
    if (delta>0)
    base+=20*delta;
}
    base = base>0?0:base;
    element.children().css({'transform':'translateX('+base+'px)'});
});