AngularJS: Prevent page scrolling when scrolling a DIV element

Question

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

So juyst make directive customscroll and put this code to it link function. (replace $( '.scrollable' ) with element from args) should work imho — Petr Averyanov
– Petr Averyanov, Commented Sep 22, 2015 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
– Aral Roca, Commented Sep 22, 2015 at 11:39

Petr Averyanov · Accepted Answer · 2015-09-22 11:45:55Z

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

answered Sep 22, 2015 at 11:45

Petr Averyanov

9,5963 gold badges25 silver badges41 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Aral Roca Over a year ago

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!

Neeraj Jain Over a year ago

It's actually working but can you please explain Why you commented //.originalEvent?

Leon Over a year ago

Great, works perfectly! Just call prevent-scroll-body on the html element you want to apply it to :)

Domi Szabo · Accepted Answer · 2016-08-26 02:02:37Z

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

}

answered Aug 26, 2016 at 2:02

Domi Szabo

112 bronze badges

Comments

kiranml1 · Accepted Answer · 2015-09-22 11:12:37Z

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

answered Sep 22, 2015 at 11:12

kiranml1

442 bronze badges

1 Comment

Aral Roca Over a year ago

I understand how works in JQuery. My question is how to do the same in angularJS directive

Collectives™ on Stack Overflow

AngularJS: Prevent page scrolling when scrolling a DIV element

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

Edited:

3 Answers 3

3 Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

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

Edited:

3 Answers 3

3 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related