Unable to scroll child component when wrapped inside the I may be w

Hey @C4PT4INNULL This issue has been resolved in <a class="issue-link js-issue-link" d

Issue with child component having scrollable body about smooth-scrollbar-react HOT 1 OPEN

nghiepdev commented on June 11, 2024

Issue with child component having scrollable body

from smooth-scrollbar-react.

Comments (1)

nghiepdev commented on June 11, 2024

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>
)