0

Código:

    window.onscroll = function (e) {
      console.log(this.oldScroll > this.scrollY)
      this.oldScroll = this.scrollY
    }

Como faço para transformar este console.log em um return e obter o valor false ou true fora desta function?

observe, eu coloco este trecho dentro de um method que executa quando o componente é criado, ou seja, com a chamada em um created, ele exibe true ou false no console mas nada que tentei me fez obter sucesso em utilizar esta informação para um outro method ou uma var em

data: () => {}

claro, se existir uma função nativa para isso, e que seja mais legal, eu aceito a dica, o objetivo é fazer com que duas toolbars distintas desçan ou subam ao rolar o well

3 Respostas 3

2

A melhor maneira é criar uma propriedade computada:

computed: {
  newScrool () {
      return this.oldScroll > this.scrollY
  }
}

Para usar em outro método basta this.newScrool

Na página: {{newScrool}}

Leia mais na documentação oficial do Vue: Dados Computados

3
  • bom, isso eu sei fazer, porém, como a informação pode sair do escopo window.onscroll = function (e) { /*sair daqui*/ }
    – flourigh
    Commented 1/07/2019 às 21:14
  • @flourigh pelo que entendi a melhor maneira é você ter uma variável computada. Seta no ciclo de vida as variáveis oldScroll e this.scrollY e adiciona o código da minha resposta.
    – Marconi
    Commented 1/07/2019 às 21:46
  • entendo, logo não existe como tirar a informação ali de dentro do scopo?
    – flourigh
    Commented 2/07/2019 às 10:24
0

Ja que você esta criando um listener para a ação scroll da janela você pode armazenar essa informação em alguma variável em data.

let vue = new Vue({
  el: "#app",
  data() {
    return {
      oldScroll: 0,
      scrollUP: false
    }
  },
  methods: {
    handleScroll(e) {
      if (this.oldScroll > window.scrollY) {
        this.scrollUP = true
      } else {
        this.scrollUP = false
      }
      this.oldScroll = window.scrollY
    }
  },
  created() {
    window.addEventListener('scroll', this.handleScroll);
  }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app" style="height:900px; padding-top:200px">
  Rolando para cima? {{scrollUP}}
</div>

3
  • realmente, concordo que poderia fazer este tipo, o problema é que terei que fazer mais variaveis na data, este exemplo que mostrei não me pede para criar outras vars, não tem como retirar um return dali de dentro?
    – flourigh
    Commented 1/07/2019 às 21:17
  • Não tem como ter um retorno por ser um event listener. stackoverflow.com/questions/33501696/…
    – Guto
    Commented 1/07/2019 às 23:50
  • entendi, como é um event listener seu return não existe, obrigado
    – flourigh
    Commented 2/07/2019 às 10:27
-1

você poderia fazer algo assim:

data: () => ({ scroll: 0 }),
created() {
      this.scroll = this.oldScroll > this.scrollY
      // ou this.store.dispatch ...
    }
}

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .