Dado que utilicé la barra de desplazamiento suave en mi proyecto react.js, ofrece resultados sorprendentemente fluidos en el desplazamiento, pero el problema al que me enfrento restringió todos mis eventos de desplazamiento anteriores.

Me di cuenta de que después de agregar la barra de desplazamiento suave, crea un div personalizado llamado **"scroll-content"** que tiene 100vh de alto, 100vw de ancho y contiene todos los componentes del proyecto como un elemento raíz. Es por eso que **Window.ScrollY o la función onScroll** no puede funcionar en esta situación, porque en este caso la ventana tiene un tamaño fijo y no se mueve a ningún lado. Solo los componentes dentro del div de la barra de desplazamiento suave se mueven hacia arriba/abajo.

Así que estoy tratando de obtener los valores de transformación de la barra de desplazamiento div. Porque este div tiene un atributo llamado **"transform: translate3d(0px,0px,0px)"** por defecto, y cambia solo después de desplazarse.

Por favor, ayúdenme a obtener los valores de este atributo.

Aquí está mi App.js que simplemente importa algunos componentes.

 import React from 'react'; import { Switch, Route } from 'react-router-dom'; import Home from './Home'; import CommingSoon from './CommingSoon'; import Navbar from './components/Navbar'; import Scroll from './components/SmoothScrollbar'; const App = () => { return ( <> <Scroll /> <Navbar/> <Switch> <Route exact path="/comming-soon" component={CommingSoon}/> <Route exact path="/" component={Home}/> </Switch> </> ); }; export default App;

Y aquí está mi SmoothScrollbar.js para configurar el desplazamiento.

 import { useEffect } from 'react'; import Scrollbar from 'smooth-scrollbar'; import OverscrollPlugin from 'smooth-scrollbar/plugins/overscroll' var options = { damping: 0.05, plugins: { overscroll: {...overscrolloptions} } } var overscrolloptions = { enable: true, damping: 0.1, effect: "bounce", maxOverscroll: 150 } const Scroll = () => { useEffect(() => { Scrollbar.use(OverscrollPlugin); Scrollbar.init(document.body, options); }, []) return null; } export default Scroll;