Question

我希望在AngularJS指令中实现类似的东西：

https://github.com/geniuscarrier/scrollToTop/blob/master/jquery.scrollToTop.js

这是相当简单的，当你不在页面的顶部时，它会淡入一个按钮滚动到顶部：

 $(window).scroll(function() {
                if ($(this).scrollTop() > 100) {
                    $this.fadeIn();
                } else {
                    $this.fadeOut();
                }
            });

但是我很难找到如何在Angular中获取当前滚动位置。我宁愿不必仅仅为这件事使用jQuery。

谢谢！

Answer 1

$window.pageYOffset

这是来自service $ window

的属性

Answer 2

我不相信Angular中有任何东西可以获得滚动位置。只需使用普通香草JS。

您可以检索任何元素的scrollTop属性。

https://developer.mozilla.org/en-US/docs/Web/API/Element.scrollTop

document.body.scrollTop

小提琴：http://jsfiddle.net/cdwgsbq5/

Answer 3

将$窗口注入您的控制器，您可以滚动

获取滚动位置

var windowEl = angular.element($window);
var handler = function() {
    console.log(windowEl.scrollTop())
}
windowEl.on('scroll', handler);

Fiddle

来自另一个stackoverflow answer

的改编

Answer 4

您可以使用

angular.element(document).bind('scroll', function() {
    if (window.scrollTop() > 100) {
        $this.fadeIn();
    } else {
        $this.fadeOut();
    }
});

Answer 5

您可以像使用polyfill一样使用这里是link

function offset(elm) {
  try {return elm.offset();} catch(e) {}
  var rawDom = elm[0];
  var _x = 0;
  var _y = 0;
  var body = document.documentElement || document.body;
  var scrollX = window.pageXOffset || body.scrollLeft;
  var scrollY = window.pageYOffset || body.scrollTop;
  _x = rawDom.getBoundingClientRect().left + scrollX;
  _y = rawDom.getBoundingClientRect().top + scrollY;
  return { left: _x, top: _y };
}

AngularJS＆＃39; scrollTop＆＃39;当量？

5 个答案: