Tengo una etiqueta div que se usa como tarjeta y quiero que la barra de desplazamiento solo sea visible al desplazarme. He usado estados para hacer esto, pero la barra de desplazamiento parpadea en cada desplazamiento. ¿Alguien puede ayudarme a solucionar esto?
Esta es la función state y handleScroll :
const [isScroll, setscroll] = useState(true) function handleScroll() { console.log("scroll detected") setscroll(!isScroll) } Este es el div donde quiero aplicar el evento de desplazamiento:
<div className={`${description} ${isScroll ? des : ""}`} id={classes.des} onScroll={handleScroll}>Este es el CSS:
.des::-webkit-scrollbar { display: none; } .description { background-color: $color-card-backgroung; padding: 12px; flex: 1; height: 100%; text-align: left; overflow-y: scroll; & > label:last-child { font-size: 1.125rem !important; color: $color-primary-7 !important; } & > label:nth-child(2) { margin-top: 16px; } }En su implementación, actualizará el estado de los componentes y volverá a renderizar cada vez que se active el evento de desplazamiento, lo que sucede con frecuencia (consulte https://developer.mozilla.org/en-US/docs/Web/API/Document/scroll_event ) . A medida que actualiza el estado isScroll con negación ( setscroll(!isScroll) ), el desplazamiento será visible y luego se ocultará cada dos veces que se active un evento de desplazamiento. Los eventos de desplazamiento se disparan a una velocidad alta, lo que significa que esto sucede muchas veces. Esto también podría causar algunos problemas de rendimiento, ya que vuelve a renderizar el componente para cada evento de desplazamiento.
Dos formas comunes de mejorar el rendimiento de los eventos de desplazamiento son usar debounce o throttle . Debounce solo activará una devolución de llamada una vez dentro de un intervalo específico, incluso si el evento se activa varias veces dentro de ese intervalo. Throttle activará una devolución de llamada una vez cada X ms. En su caso, podemos establecer el desplazamiento en true cuando se activa el primer evento y luego usar el rebote para ocultar el desplazamiento dentro de un cierto intervalo después de que el usuario deja de desplazarse. Puedes encontrar un buen artículo sobre el rebote en reaccionar aquí: https://dmitripavlutin.com/react-throttle-debounce/ si quieres entenderlo mejor. Puede usar lodash para obtener una versión ya implementada de debounce ( https://lodash.com/docs/4.17.15#debounce ) o implementarla usted mismo.
Una implementación actualizada que resuelva su problema podría verse así:
import debounce from 'lodash-es/debounce' const debouncedScrollHandler = useMemo(debounce(() => { setscroll(false) }, 500), []) const handleScroll = () => { if(!isScroll) { console.log("scroll detected") setscroll(true) } debouncedScrollHandler() } Ahora estamos configurando el desplazamiento en true tan pronto como el usuario comienza a desplazarse y no lo configuramos en falso hasta 500 ms después de que el usuario haya dejado de desplazarse. Es posible que se haya perdido algo en la implementación, pero debería indicarle la dirección correcta.