AngularJS：滚动 DIV 元素时防止页面滚动

Question

在AngularJS中滚动DIV元素时如何防止页面滚动？

阅读此JQuery answer 后，我想在 AngularJS 指令 中应用相同的内容，但我不知道如何...有什么建议吗？

JQuery 中的示例： http://jsfiddle.net/XNwbt/458/

$( '.scrollable' ).bind( 'mousewheel DOMMouseScroll', function ( e ) {
    var e0 = e.originalEvent,
    delta = e0.wheelDelta || -e0.detail;

    this.scrollTop += ( delta < 0 ? 1 : -1 ) * 30;
    e.preventDefault();
});

谢谢！

---

编辑：

我尝试在 AngularJS 中做同样的事情，但 DIV 元素永远不会滚动...

'use strict';

angular
    .module('core')
    .directive('preventScrollBody', preventScrollBody);

function preventScrollBody() {
    return{
        link: link,
        restrict: 'A'
    };

    function link(scope, element, attrs) {
        element.bind( 'mousewheel DOMMouseScroll', function ( e ) {
            var e0 = e.originalEvent,
                delta = e0.wheelDelta || -e0.detail;

            this.scrollTop += ( delta < 0 ? 1 : -1 ) * 30;
            e.preventDefault();
        });
    }
}

Answer 1

至少在我的 chrome 中工作：

function link(scope, element, attrs) {
    element.bind( 'mousewheel DOMMouseScroll', function ( e ) {
      console.log(e);
        var e0 = e;//.originalEvent,
        var delta = e0.wheelDelta || -e0.detail;

        this.scrollTop += ( delta < 0 ? 1 : -1 ) * 30;
        e.preventDefault();
    });
}

http://plnkr.co/edit/sZFvgIyt9l9SZjQtTkH2?p=preview

Answer 2

使用 Petr 的出色答案，我已经替换了行

    var delta = e0.wheelDelta || -e0.detail;

与

    var delta = e0.originalEvent.wheelDelta || -e0.detail;

而且效果很好。 所以修改后的函数是

    function link(scope, element, attrs) {
      element.bind( 'mousewheel DOMMouseScroll', function ( e ) {

        var e0 = e;
        var delta = e0.originalEvent.wheelDelta || -e0.detail;

        this.scrollTop += ( delta < 0 ? 1 : -1 ) * 30;
        e.preventDefault();
      });

}

Answer 3

事件参数“e” - 包含滚动事件对象，可让您防止页面滚动，当它在 div ('.scrollable') 上滚动时，如下所示

event.preventDefault();