Javascript AngularJS 并在控制器中获取窗口滚动位置
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/26365339/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
AngularJS and getting window scroll position in controller
提问by Squrler
I'm having some trouble understanding how to get the scroll position of window within my controller, so I can build logic around it.
我在理解如何在控制器中获取窗口的滚动位置时遇到了一些麻烦，因此我可以围绕它构建逻辑。
From all the questions and answers I've been reading the most accepted answer seems to be to write a directive that calculates the scroll position, stick that directive on an element, and that's it.
从我一直在阅读的所有问题和答案中，最被接受的答案似乎是编写一个计算滚动位置的指令，将该指令粘贴在一个元素上，就是这样。
However, when you want to do something along the lines of:
但是，当您想做以下事情时：
if (scrollY > 100 ){
$scope.showMenu = true;
}
if (scrollY > 500) {
$scope.showFooter = true;
}
This approach doesn't seem to work, because the calculated position in the directive can't be accessed from the controller. What would be the right 'Angular' way of doing this, which would still allow slightly more complicated logic to be executed from the controller?
这种方法似乎不起作用，因为无法从控制器访问指令中计算出的位置。这样做的正确“Angular”方式是什么，它仍然允许从控制器执行稍微复杂的逻辑？
回答by Zachary Dahan
According to @RobKohr comment, here's a optimized approach using .on('scroll')and $scope.$applyto update a scope element on scroll.
根据@RobKohr 的评论，这是一种使用.on('scroll')和$scope.$apply更新滚动时范围元素的优化方法。
$document.on('scroll', function() {
// do your things like logging the Y-axis
console.log($window.scrollY);
// or pass this to the scope
$scope.$apply(function() {
$scope.pixelsScrolled = $window.scrollY;
})
});
回答by Simon Robb
Inject the $windowservice into your controller, which is simply a wrapper around the browser windowobject, and you have the $window.scrollXand $window.scrollYproperties.
将$window服务注入您的控制器，它只是浏览器window对象的包装器，您拥有$window.scrollX和$window.scrollY属性。
If you want to respond to changes in scroll, put a watch on them:
如果您想响应滚动中的更改，请注意它们：
$scope.$watch(function () {
return $window.scrollY;
}, function (scrollY) {
/* logic */
});
回答by georgeawg
The accepted answer lacks teardown code:
接受的答案缺少拆卸代码：
ERRONEOUS (lacks teardown)
$document.on('scroll', function() { // do your things like logging the Y-axis console.log($window.scrollY); // or pass this to the scope $scope.$apply(function() { $scope.pixelsScrolled = $window.scrollY; }) });
错误（缺乏拆解）
$document.on('scroll', function() { // do your things like logging the Y-axis console.log($window.scrollY); // or pass this to the scope $scope.$apply(function() { $scope.pixelsScrolled = $window.scrollY; }) });
To avoid memory leaks and other undesired behavior, the code needs to do proper teardown when the $scopeis destroyed.
为避免内存泄漏和其他不良行为，代码需要在销毁时进行适当的拆卸$scope。
$document.on('scroll', scrollHandler);
$scope.$on("$destroy", function() {
$document.off('scroll', scrollHandler);
});
function scrollHandler(ev) {
// do your things like logging the Y-axis
console.log($window.scrollY);
// or pass this to the scope
$scope.$apply(function() {
$scope.pixelsScrolled = $window.scrollY;
});
}
