Since I have use smooth-scrollbar in my react.js project, it gives an amazing smoothy results in scrolling but the issue I'm facing smooth-scrollbar restricted my all previous Scroll Events.

I noticed that after adding smooth-scrollbar, it makes a custom div named **"scroll-content"** which has 100vh height, 100vw width and it contains our whole project components as a root element, That's why **Window.ScrollY or onScroll** function can't work in this situation, beacuse in this case window has fixed size and it isn't moving anywhere. Only the components inside smooth-scrollbar div are moving up/down.

So I'm trying to get the scrollbar div's transform values. Because this div has an attribute named **"transform: translate3d(0px,0px,0px)"** by deafult, and it change it self after scrolling.

Please help me guys to get this attribute values.

Here is my App.js which simply importing some components.

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;

And Here is my SmoothScrollbar.js for setting up Scrolling.

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;