Comment écouter l'événement de défilement de fenêtre dans un composant VueJS ?

Question

Je veux écouter l'événement de défilement de fenêtre dans mon composant Vue. Voici ce que j'ai essayé jusqu'à présent:

Avec `` l'être défini dans mes méthodes de composant, mais il ne semble pas fonctionner.

Quelqu'un a une idée de comment faire cela?

Merci!

Answer 1

En fait, j'ai trouvé une solution. J'ajoute un auditeur d'événements sur `` l'événement lorsque le composant est créé. Assurez-vous également de supprimer l'auditeur de l'événement lorsque le composant est détruit.

J'espère que cela aide!

Answer 2

Dans mon expérience, à l'aide d'un écouteur d'événement sur faites défiler jusqu'peut créer beaucoup de bruit en raison de la tuyauterie dans le flux d'événements, ce qui peut provoquer des problèmes de performances si vous exécutez un volumineux handleScroll fonction.

J'utilise souvent la technique décrite ici dans la plus haute cote de réponse, mais j'ai ajouter de l'anti-rebond sur le haut, habituellement d'environ 100ms rendements de bonnes performances UX ratio.

Voici un exemple d'utilisation de la top-rated réponse avec Lodash antirebond ajouté:

import debounce from 'lodash/debounce';

export default {
  methods: {
    handleScroll(event) {
      // Any code to be executed when the window is scrolled
      this.isUserScrolling = (window.scrollY > 0);
      console.log('calling handleScroll');
    }
  },

  created() {
    this.handleDebouncedScroll = debounce(this.handleScroll, 100);
    window.addEventListener('scroll', this.handleDebouncedScroll);
  },

  beforeDestroy() {
    // I switched the example from `destroyed` to `beforeDestroy`
    // to exercise your mind a bit. This lifecycle method works too.
    window.removeEventListener('scroll', this.handleDebouncedScroll);
  }
}

Essayez de changer la valeur de 100 de 0 et 1000 de sorte que vous pouvez voir la différence dans comment/quand handleScroll est appelé.

BONUS: Vous pouvez également procéder de manière encore plus concise et réutilisables, avec une bibliothèque comme vue-scroll. C'est un grand cas d'utilisation pour vous d'apprendre sur les directives en Vue si vous ne l'avez pas vu encore. Découvrez https://github.com/wangpin34/vue-scroll.

C'est aussi un excellent tutoriel par Sarah Drasner dans la Vue docs: https://vuejs.org/v2/cookbook/creating-custom-scroll-directives.html

Answer 3

Vos exigences étaient sur le composant, mais vous avez fini par ajouter sur le corps et non sur le composant. Bien sûr, vous pouvez le faire sur un élément particulier ainsi, mais bon ... Voici ce qui fonctionne directement avec les composants personnalisés Vue.

Ou

et définir une méthode pour handleScroll. Simple!

Answer 4

J'ai été dans le besoin de cette fonctionnalité en plusieurs fois, donc je l'ai extrait dans un mixin. Il peut être utilisé comme ceci:

import windowScrollPosition from 'path/to/mixin.js'

new Vue({
  mixins: [ windowScrollPosition('position') ]
})

Cela crée un réactif position de la propriété (peut être le nom que nous aimons) sur la Vue de l'instance. La propriété contient la fenêtre de la position de défilement comme un [x,y] tableau.

N'hésitez pas à jouer autour avec cette CodeSandbox démo.

Voici le code de la mixin. Il est abondamment commenté, donc il ne devrait pas être trop difficile d'obtenir une idée de comment il fonctionne:

function windowScrollPosition(propertyName) {
  return {
    data() {
      return {
        // Initialize scroll position at [0, 0]
        [propertyName]: [0, 0]
      }
    },
    created() {
      // Only execute this code on the client side, server sticks to [0, 0]
      if (!this.$isServer) {
        this._scrollListener = () => {
          // window.pageX/YOffset is equivalent to window.scrollX/Y, but works in IE
          // We round values because high-DPI devies can provide some really nasty subpixel values
          this[propertyName] = [
            Math.round(window.pageXOffset),
            Math.round(window.pageYOffset)
          ]
        }

        // Call listener once to detect initial position
        this._scrollListener()

        // When scrolling, update the position
        window.addEventListener('scroll', this._scrollListener)
      }
    },
    beforeDestroy() {
      // Detach the listener when the component is gone
      window.removeEventListener('scroll', this._scrollListener)
    }
  }
}