1

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();
        });
    }
}
Community
  • 1
  • 1
Aral Roca
  • 5,442
  • 8
  • 47
  • 78
  • So juyst make directive customscroll and put this code to it link function. (replace $( '.scrollable' ) with element from args) should work imho – Petr Averyanov Sep 22 '15 at 11:27
  • Just edited the question. I tried to do the same in Angular but doesn't work. (added the code in the question) – Aral Roca Sep 22 '15 at 11:39

3 Answers3

4

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

Petr Averyanov
  • 9,327
  • 3
  • 20
  • 38
  • Amazing! This works for me in plnkr, but I copied & pasted in my project and doesn't work. Maybe is for the Angular version? you are using Angular 1.4 and I'm using an old version of Angular 1.2... mmm I don't understand! hah! Thank you for all! – Aral Roca Sep 22 '15 at 12:25
  • It's actually working but can you please explain Why you commented `//.originalEvent`? – Neeraj Jain Dec 21 '17 at 13:00
  • Great, works perfectly! Just call prevent-scroll-body on the html element you want to apply it to :) – Leon Jun 08 '19 at 15:54
1

Using Petr's great answer, I've replaced line

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

with

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

and it works perfectly. So modified function is

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

}

Domi Szabo
  • 11
  • 2
0

event argument "e" - which holds the scroll event object lets you prevent the page scroll, when it is scrolling on div ('.scrollable') as below

event.preventDefault();
kiranml1
  • 44
  • 2