web-dev-qa-db-fra.com

L'équivalent 'scrollTop' d'AngularJS?

Je cherche à mettre en œuvre quelque chose de similaire à ceci dans une directive AngularJS:

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

C'est assez simple, quand vous n'êtes pas en haut de la page, il y aura un fondu dans le bouton pour faire défiler vers le haut:

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

Cependant, j'ai du mal à trouver comment obtenir l'emplacement de défilement actuel dans Angular. Je préférerais ne pas avoir à utiliser jQuery uniquement pour cette seule chose. 

Merci!

javascriptangularjsangularjs-directive
15
pram
$window.pageYOffset

Ceci est la propriété de la fenêtre service $

33
Blaze

Je ne crois pas qu'il y ait quelque chose dans Angular pour obtenir la position du parchemin. Utilisez simplement Vanilla JS.

Vous pouvez récupérer la propriété scrollTop sur n'importe quel élément.

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

document.body.scrollTop

Violon pour toi: http://jsfiddle.net/cdwgsbq5/

4
HaukurHaf

Injectez la fenêtre $ dans votre contrôleur et vous pourrez obtenir la position de défilement lors du défilement 

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

Fiddle

Adaptation d'un autre stackoverflow answer

2
jetpackdata.com

Vous pouvez utiliser 

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

Vous pouvez utiliser comme polyfillhere un 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 };
}
0
fulabel