angular js scrolling directive not working

Question

I'm trying to do angular (1.3.14) directive to handle scrolling event on element like this

var app = angular.module('myApp', []);

app.directive("scroll", function ($window) {
    return {
      restrict: 'A',
      link: function(scope, element, attrs) {
          console.log(element.className); // return 'undefined'
          element.on('scroll', function(e) {
            console.log('scroll'); //not working
          });
          element.on('click', function(e) {
            console.log('click'); //working
          });
      }
    }
});

My problem is that scroll event doesn't fire. Every other event like clicking is normaly working, but scrolling not. Also when I try to get class of element I get 'undefined' and my element has class. It's html:

<body ng-app="myApp" ng-controller="myCtrl" ng-keydown="keyListener($event)">
    <section class="dark content second" scroll="">         
    </section>
</body>

I don't know what can be wrong here.

Scroll events do not bubble, they only fire on the specific elements with a scroll bar (if it displays a scroll bar). See MDN Event Reference - scroll — georgeawg
– georgeawg, Commented Aug 19, 2018 at 15:10

Miguel Castillo · Accepted Answer · 2018-08-19 15:25:34Z

2

Your directive is right, I've made a test with an internal div in your section with some classes to make it scrollable

<section class="dark content second" scroll="">
  Hi         
  <div class="internal">
    Something
  </div>
</section>

CSS

    .second{
      background-color: red;
      max-height: 150px;
     overflow-y:scroll;
    }

   .internal{
      height: 200px;
    }

And the event works perfectly! You just have to make your <section> scrollable or apply the directive in the body/html tag. Here's the Plunker example that I've tested http://plnkr.co/edit/hp2BbnLeGjtwIbfi2mqZ?p=preview

answered Aug 19, 2018 at 15:25

Miguel Castillo

914 bronze badges

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

Comments

Mikhail Malakhvei · Accepted Answer · 2018-10-17 15:03:45Z

0

Try this

     console.log(attrs.class);
     element.bind('scroll', function() {
        console.log('scroll');
     });

edited Oct 17, 2018 at 15:03

answered Oct 17, 2018 at 14:53

Mikhail Malakhvei

1155 bronze badges

Collectives™ on Stack Overflow

angular js scrolling directive not working

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related