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.
scrolleableArea.scrollTo({...
como lo indica en lodash.com/docs/4.17.15#throttle