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

事件参数"e" - 它保存滚动事件对象，当它在 div ('.scrollable') 上滚动时，可以防止页面滚动，如下所示

event.preventDefault();

Answer 2

至少在我的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 3

使用 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();
      });

}

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

AngularJS: Prevent page scrolling when scrolling a DIV element

scroll

scrollbar

angularjs

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

已编辑：