i creating angular app angular material. , have issue scroll event.
my app composed of left sidenav fixed, , content on right. try inspect scroll on content on right, without success. think layout directives provoke bug.
this html example of 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 <div class="test"></div> has huge height, <md-content></md-content> scrollable, , fire scroll event directive scroll.
so put height of <div class="test"></div> 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 , can't fire scroll event. doing wrong, , how can fix ?
ps : here fiddle of problem : https://jsfiddle.net/wahddee2/4/
it's element scrolling, not $window, that's should attach event listener to.
element.on("scroll", function() { console.log(element[0].scrolltop); }); 
Comments
Post a Comment