Quiero mostrar algo mientras NO me desplazo, esconderlo mientras me desplazo y volver a mostrarlo cuando se detiene el desplazamiento.

Para aclararme más: puedo mostrar fácilmente lo que quiero y ocultarlo nuevamente si se activa el evento de desplazamiento. Sin embargo, si el evento de desplazamiento se ha detenido, quiero actualizar mi vista y para eso necesito saber cuándo sucede eso.

He visto algunas ideas con el tiempo de espera, pero eso significa que mientras me desplazo necesito verificar periódicamente si el evento aún se está activando o no.

Me parece que este no es un buen enfoque, si hay una manera de manejar ese evento orientado. El mejor caso de szenario que se me ocurre es un "desplazamiento" booleano variable que puedo usar para una propiedad calculada. Entonces algo como esto:

 computed:{
      displayLine: function(){
          if(scrolling){
            //display what I want
          } else{
            //hide it
          }
      }
      // Or something like this: 
      scrolling: function(){
        //if scrolling
        return true;
        //if not scrolling
        return false;
      }
   }
1
telion 13 sep. 2018 a las 12:11

3 respuestas

La mejor respuesta

Ok, sé que realmente no quieres usar un temporizador, pero parece ser la forma adecuada de hacerlo, ya que realmente no tenemos una forma de determinar el desplazamiento detenido. Entonces, ¿qué tal algo como esto:

var scroll;
window.addEventListener('scroll', function (event) {
  window.clearTimeout(scroll);
  hidestuff();
  scroll = setTimeout(function () {
    redisplay();
  }, 500);
}, false);

El código anterior actualiza el temporizador cada vez que se activa el desplazamiento y si durante medio segundo (500 milisegundos) no se realiza ningún desplazamiento, se asume un " detener desplazamiento " y usted llama a su lógica para volver a mostrar lo que he escondido

1
etarhan 14 abr. 2019 a las 11:12

Investigué un poco y no he encontrado una manera de detectar el final del desplazamiento sin setTimeout.

Entonces, esto es lo que sugiere, en su método de ciclo de vida created, agregue un detector de eventos al evento de desplazamiento que cambie un booleano scrolling a verdadero. Utiliza setTimeout para cambiarlo a falso cada 200 ms.

Y en su DOM, usa una directiva v-if para mostrar su elemento si no se desplaza.

Algo como esto :

new Vue({
  el: "#app",
  data: {
    scrolling: false
  },
  methods: {},
  created: function() {
    let isScrolling;
    window.addEventListener('scroll', () => {
      this.scrolling = true
      window.clearTimeout(isScrolling);
      isScrolling = setTimeout(() => {
        this.scrolling = false
      }, 400);
    }, false);
  }
})
<div id="app">
  <p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus expedita, voluptate eveniet sequi fugiat doloribus omnis facilis aliquid ipsa mollitia ab illum eius dolores soluta accusantium quos vitae assumenda tempore?Lorem ipsum dolor sit amet,
    consectetur adipisicing elit. Alias laboriosam, ullam repellat quod quae repudiandae ipsum distinctio eius numquam officia. Eos quia, enim. Sunt nisi accusamus non dicta, similique sit.
  </p>
  <p v-if="!scrolling">
    NOT SCROLLING
  </p>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus expedita, voluptate eveniet sequi fugiat doloribus omnis facilis aliquid ipsa mollitia ab illum eius dolores soluta accusantium quos vitae assumenda tempore?Lorem ipsum dolor sit amet,
    consectetur adipisicing elit. Alias laboriosam, ullam repellat quod quae repudiandae ipsum distinctio eius numquam officia. Eos quia, enim. Sunt nisi accusamus non dicta, similique sit.
  </p>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus expedita, voluptate eveniet sequi fugiat doloribus omnis facilis aliquid ipsa mollitia ab illum eius dolores soluta accusantium quos vitae assumenda tempore?Lorem ipsum dolor sit amet,
    consectetur adipisicing elit. Alias laboriosam, ullam repellat quod quae repudiandae ipsum distinctio eius numquam officia. Eos quia, enim. Sunt nisi accusamus non dicta, similique sit.
  </p>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus expedita, voluptate eveniet sequi fugiat doloribus omnis facilis aliquid ipsa mollitia ab illum eius dolores soluta accusantium quos vitae assumenda tempore?Lorem ipsum dolor sit amet,
    consectetur adipisicing elit. Alias laboriosam, ullam repellat quod quae repudiandae ipsum distinctio eius numquam officia. Eos quia, enim. Sunt nisi accusamus non dicta, similique sit.
  </p>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus expedita, voluptate eveniet sequi fugiat doloribus omnis facilis aliquid ipsa mollitia ab illum eius dolores soluta accusantium quos vitae assumenda tempore?Lorem ipsum dolor sit amet,
    consectetur adipisicing elit. Alias laboriosam, ullam repellat quod quae repudiandae ipsum distinctio eius numquam officia. Eos quia, enim. Sunt nisi accusamus non dicta, similique sit.
  </p>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus expedita, voluptate eveniet sequi fugiat doloribus omnis facilis aliquid ipsa mollitia ab illum eius dolores soluta accusantium quos vitae assumenda tempore?Lorem ipsum dolor sit amet,
    consectetur adipisicing elit. Alias laboriosam, ullam repellat quod quae repudiandae ipsum distinctio eius numquam officia. Eos quia, enim. Sunt nisi accusamus non dicta, similique sit.
  </p>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus expedita, voluptate eveniet sequi fugiat doloribus omnis facilis aliquid ipsa mollitia ab illum eius dolores soluta accusantium quos vitae assumenda tempore?Lorem ipsum dolor sit amet,
    consectetur adipisicing elit. Alias laboriosam, ullam repellat quod quae repudiandae ipsum distinctio eius numquam officia. Eos quia, enim. Sunt nisi accusamus non dicta, similique sit.
  </p>
</div>

Aquí hay una jsfiddle

1
Thomas Lombart 13 sep. 2018 a las 09:37

El término que debe buscar es eventos de eliminación de rebotes . En este caso, los eventos de desplazamiento. Cuando agrega un evento para el desplazamiento, el navegador envía eventos de desplazamiento cada vez que se mueve / rueda la rueda del mouse. Una cosa a tener en cuenta es que el evento de desplazamiento se activará varias veces según la rueda de desplazamiento.

Entonces, lo que quiere ahora es saber cuándo se envió el primer evento de desplazamiento (desplazamiento = verdadero) y cuándo se envió el último evento de desplazamiento (desplazamiento = falso).

Bueno, veamos primero el código y luego profundizaremos en la explicación.

data(){
   return{
      isScrolling:false // initially false,
      scrollTimeout: null
   }
},
methods:{
  onScroll(event){
     const vm = this
     vm.isScrolling = true; //as soon as scroll event is dispatched, set isScrolling as true
     clearTimeout(vm.scrollTimeout); // clea
     vm.scrollTimeout = setTimeout(function(){
       vm.isScrolling = false
     },300) //300ms after the last event isScrolling will be set false.
   }
}

Permítanme explicar rápidamente lo que está sucediendo en el código.

Como sabemos, se activan múltiples eventos para el desplazamiento, por lo que establecemos isScrolling como verdadero (se establecerá como verdadero cada vez que se envíe un evento). Y luego, cada vez que se envíe el evento de desplazamiento, intentaremos establecer isScrolling como falso, suponiendo que el evento actual sea el último evento de desplazamiento, utilizando 300 ms de retraso (o el tiempo que desee dar). En caso de que este no sea el último evento, cancelaremos el setTimeout anterior que está almacenado en scrollTimeout e intentaremos nuevamente con el evento actual. Y para el último evento, el último setTimeout no se borrará, por lo tanto, establecer isScrolling como falso.

Esta forma muy inteligente e interesante de manejar los eventos es un rebote. Te recomiendo que leas más al respecto.

Espero que ayude.

1
The Observer Man 13 sep. 2018 a las 09:44