it-roy-ru.com

AngularJS 'scrollTop' эквивалент?

Я пытаюсь реализовать нечто подобное в директиве 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 только для этой единственной вещи.

Спасибо!

15
pram
$window.pageYOffset

Это свойство из окна службы $

33
Blaze

Я не верю, что в Angular есть что-то, чтобы получить позицию прокрутки. Просто используйте обычный Vanilla JS.

Вы можете получить свойство scrollTop для любого элемента.

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

document.body.scrollTop

Скрипка для тебя: http://jsfiddle.net/cdwgsbq5/

4
HaukurHaf

Вставьте окно $ в ваш контроллер, и вы можете получить положение прокрутки на прокрутке 

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

Fiddle

Адаптация от другого stackoverflow ответ

2
jetpackdata.com

Ты можешь использовать 

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

Вы можете использовать как polyfill здесь ссылка

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 };
}
0
fulabel