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/