Aral Roca Aral Roca - 3 months ago 19
AngularJS Question

AngularJS: Prevent page scrolling when scrolling a DIV element

How to prevent page scrolling when scrolling a DIV element in AngularJS?



After reading this JQuery answer I want to apply the same in AngularJS directive but I don't know how... Any suggestions?

Example in 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();
});


Thank you!




Edited:



I tried to do the same in AngularJS but the DIV element never is scrolling...

'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

At least work in my 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

Comments