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