Question

我目前正在创建一个带角度材质的角度应用。我有滚动事件的问题。

我的应用程序由固定的左侧窗口和右侧的内容组成。我尝试检查右侧内容的滚动，但没有任何成功。我认为布局指令会引发这个错误。

这是我的问题的一个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：这是我的问题的一小部分：https://jsfiddle.net/wahddee2/4/

Answer 1

滚动的是element，而不是$window，这就是您应该将事件监听器附加到的内容。

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

角度材料不会触发滚动事件

1 个答案: