Inside iframe this component does not render a custom scrollbar but a native scrollbar

[saxenarajat]

As soon as, I switch the tabs and come back to the original tab, the native scrollbar is replaced with the custom scrollbar. Can anybody tell me what this behavior is?

Thanks for this library.

[alexaaaant]

I had the same issue. My problem was that iframe was rendering content with style display:none, so scroll was not able to get the actual container height

[d2r-app]

Thanks for the tip @alexaaaant. The following seems to work for loading my component within an iframe:

  const [windowWidth, setWindowWidth] = useState(window.innerWidth);
  const [windowHeight, setWindowHeight] = useState(window.innerHeight);

  const onResize = useCallback(() => {
    setWindowWidth(window.innerWidth);
    setWindowHeight(window.innerHeight);
  }, []);

  useEffect(() => {
    window.addEventListener('resize', onResize);
    return () => { window.removeEventListener('resize', onResize) };
  }, [onResize]);

{!!windowWidth && !!windowHeight && <Scrollbars>...</Scrollbars>}