Angular material 没有触发滚动事件

Question

我目前正在使用 angular material 创建一个 angular 应用程序。我对滚动事件有疑问。

我的应用由固定的左侧导航和右侧的内容组成。我尝试检查右侧内容的滚动，但没有成功。我认为布局指令会引发此错误。

这是我的问题的 html 示例：

<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>

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

如果 <div class="test"></div> 有很大的高度，<md-content></md-content> 将是可滚动的，我通常可以用我的指令 scroll.

触发滚动事件

所以我把 <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;
}

不幸的是，它不起作用，我无法触发滚动事件。我做错了什么，我该如何解决？

PS：这是我的问题 fiddle：https://jsfiddle.net/wahddee2/4/

Answer 1

滚动的是您的 element，而不是 $window，因此您应该将事件侦听器附加到它。

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

Angular material 没有触发滚动事件

Angular material not firing scroll event

javascript

jquery

angularjs

angular-material