我目前正在使用 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>至 1500 像素:
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/
最佳答案
滚动的是您的 element，而不是 $window，因此您应该将事件监听器附加到它。
element.on("scroll", function() {
console.log(element[0].scrollTop);
});
关于javascript - Angular Material 不触发滚动事件，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36236865/