Issue with child component having scrollable body

[ArunNGun]

Unable to scroll child component when wrapped inside the

I may be wrong or missing out on something, If someone knows how to fix it please let me know

reproducible code
https://codesandbox.io/s/smooth-scrollbar-react-forked-m3kdvf?file=/src/App.tsx

[nghiepdev]

Hey @C4PT4INNULL This issue has been resolved in idiotWu/smooth-scrollbar#92 (comment)
In the real world, we can make a hook to enable a native scrollbar inside to stop events from propagating

import { useEffect, useRef } from "react";

const EventTypes = ["touchmove", "mousewheel", "wheel"] as const;

export function useStopWheel() {
  const ref = useRef<HTMLElement>(null);

  useEffect(() => {
    const handler = (e: Event) => e.stopPropagation();

    EventTypes.forEach((eventType) => {
      ref.current?.addEventListener(eventType, handler);
    });

    return () => {
      EventTypes.forEach((eventType) => {
        ref.current?.removeEventListener(eventType, handler);
      });
    };
  }, []);

  return ref;
}

And use in somewhere

const stopWheelRef = useStopWheel();
return (
  <div ref={stopWheelRef} className="dropdown-content">
     <div>item 1</div>
     <div>item 2</div>
     <div>item 3</div>
  </div>
)

Finally, this is a fork to implement https://codesandbox.io/s/smooth-scrollbar-react-forked-k7gz8o?file=/src/Select.jsx:317-329