0

I am currently creating an angular app with angular material. And I have an issue with scroll event.

My app is composed of a left sidenav which is fixed, and a content on the right. I try to inspect scroll on the content on the right, but without any success. I think layout directives provoke this bug.

This is an html example of my problem :

<body ng-app="MyApp" layout="row" ng-cloak>

 <md-sidenav layout="column" md-is-locked-open='true'>
   SideNav
   </md-sidenav>

  <md-content flex layout="column" scroll>
    <ng-view>
      <div class="test">Content</div>
    </ng-view>
  </md-content>
</body>

The javascript :

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

app.directive("scroll", function ($window) {
    return function(scope, element, attrs) {

        angular.element($window).on("scroll", function() {
            if (this.pageYOffset >= 100) {
                 console.log('Scrolled below 100px');
             } else {
                 console.log('Scrolled above 100px');
             }
        });
    };
});

If the <div class="test"></div> has a huge height, <md-content></md-content> will be scrollable, and I could normally fire scroll event with my directive scroll.

So I put the height of <div class="test"></div> to 1500px :

md-sidenav  {
  width: 110px;height:100%;
  padding:20px;
  background-color: #6bc7cc;
}

md-content {
  background-color : tan;
  height:100%;
  padding:20px;
}

.test {
  height: 1500px;
}

Unfortunately it's not working and I can't fire scroll event. What am I doing wrong, and how can I fix that ?

PS : here is a fiddle of my problem : https://jsfiddle.net/wahddee2/4/

1 Answer 1

1

It's your element that is scrolling, not $window, so that's what you should attach the event listener to.

element.on("scroll", function() {
    console.log(element[0].scrollTop);
});
0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.