angularjs的mousewheel事件监听
逄岳
转自：http://demo.sodhanalibrary.com/angular/directive/mouse-wheel-event.html
<!DOCTYPE html>
<html ng-app="myApp" ng-controller="MyCtrl">
<head>
<script src="https://cdn.bootcss.com/angular.js/1.2.15/angular.js"></script>
</head>
<body>
<div style="width:200px;height:100px;border:1px solid #ccc;" ng-mouse-wheel-up="upCount= upCount+1"
ng-mouse-wheel-down="downCount= downCount+1">Mouse Wheel Scroll Here
</div>
</div>
<div>scroll up count : {{upCount}}</div>
<div>scroll down count : {{downCount}}</div>
<script>
var myApp = angular.module('myApp', []);
function MyCtrl($scope) {
$scope.upCount = 0;
$scope.downCount = 0;
}
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();
}
}
});
};
});
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();
}
}
});
};
});
</script>
</body>
</html>
类似资料：