0

El contexto bajo el porqué lo quiero realizar es un poco difícil de explicar, pero en resumen quiero crear mi propia función de scroll (invokeScroll), que se añada cono evento de tipo "wheel" a un "contenedor1", y que cause un scroll en un "contenedor2".

  • contenedor1: Área donde se debe invocar o realizar el scroll.
  • contenedor2: En este caso muy particular, este contenedor esta bloqueado por la propiedad CSS de pointer-events: "none", así que ningún evento de mouse tiene efecto en el.

Un ejemplo de como lo estoy realizando (pero no me convence) se encuentra en este sandbox.

Si no gustan verlo en sandbox:

CSS

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: "Open sans", sans-serif;
}

.App {
  display: flex;
  height: 100vh;
}

.App > div {
  width: 50%;
  height: 100vh;
  padding-top: 100px;
  display: flex;
  justify-content: center;
  border: 2px dashed red;
  text-align: center;
}

.App .scrolleableArea {
  overflow-x: hidden;
  overflow-y: scroll;
  pointer-events: none;
}

JS

import { useEffect } from "react";
import "./styles.css";

export default function App() {
  const customScroll = (e) => {
    e.preventDefault();
    e.stopPropagation();

    const scrolleableArea = document.querySelector(".scrolleableArea");
    scrolleableArea.scrollTo({
      top: scrolleableArea.scrollTop + e.deltaY * 3,
      behavior: "smooth"
    });
  };

  useEffect(() => {
    const scrollArea = document.querySelector(".scrollArea");
    scrollArea.addEventListener("wheel", customScroll, { passive: false });

    return () => scrollArea.removeEventListener("wheel", customScroll);
  }, []);

  return (
    <div className="App">
      <div className="scrolleableArea">
        <div style={{ height: "3000px" }}>
          Area donde se debe producir el scroll
          <br />
          <br />
          (Scroll bloqueado por la propiedad
          <br />
          <strong>pointer-events: "none"</strong>)
        </div>
      </div>
      <div className="scrollArea">Area donde se debe invocar el scroll</div>
    </div>
  );
}

Como se puede ver en el ejemplo, he logrado causar el efecto, pero se puede percibir un delay o retraso al hacer varios scrolls rápidos y seguidos ¿Cómo podría conseguir un efecto natural y que se haga en tiempo real, o como lo harían ustedes?

Cabe resaltar que este "contenedor1" no tiene una altura suficiente como para tener desplazamiento vertical, por lo que addEventListener('scroll', invokeScroll) no se debería usar, ni la propiedad de scrollTop del "contenedor1", ya que este al no tener desplazamiento vertical siempre será 0; en su lugar podría servir addEventListener('wheel', invokeScroll) que invoca la función sin importar si el "contenedor1" tiene o no desplazamiento vertical.

5
  • Excelente trabajo, hasta donde se puede desplazar el scroll down?, no veo que funcione scrollup
    – g.4
    Commented el 27 abr. 2023 a las 4:52
  • Asi como esta si llega al final del scroll, ya no sube
    – g.4
    Commented el 27 abr. 2023 a las 5:11
  • @g.4 mmmm pues acabo de ver nuevamente el ejemplo, y si realiza scroll up.
    – AndyRCR
    Commented el 27 abr. 2023 a las 19:39
  • podrias intentar usar scrolleableArea.scrollTo({... como lo indica en lodash.com/docs/4.17.15#throttle
    – user327285
    Commented el 28 abr. 2023 a las 18:02
  • Lo dejaré como tú ejemplo.
    – user327285
    Commented el 29 abr. 2023 a las 1:29

1 respuesta 1

0

Creo que este tipo de retraso es causado por diferentes procesamientos que ocurren cuando llamas a la función que produce el desplazamiento, para evitarlo puedes usar una función throttle la cual optimiza el llamado de la funciones como lo dice en la documentación "Crea una función throttle que solo invoca funct como máximo una vez por cada milisegundos de espera", asi que dentro de useEffect quedaría algo asi:

  useEffect(() => {
    const scrollArea = document.querySelector(".scrollArea");
    scrollArea.addEventListener("wheel", customScroll, { passive: false });

    return () => scrollArea.removeEventListener("wheel", customScroll);
  }, []);

  return (
    <div className="App">
      <div className="scrolleableArea">
        <div style={{ height: "3000px" }}>
2
  • useCallback no se puede invocar dentro del useEffect, luego quitando el hook, tampoco parece funcionar :/
    – AndyRCR
    Commented el 29 abr. 2023 a las 1:12
  • Lo dejaré como tú ejemplo.
    – user327285
    Commented el 29 abr. 2023 a las 1:29

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.