I wanted to disable the scrollbar when a popup screen is opened and with my current method, the screen tends to randomly glitch on scroll despite the scrollbar being disabled. So, is there a better way to create a scrollbar handler component

My Current Method

const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
const scrollLeft = window.pageXOffset || document.documentElement.scrollLeft;
export const scrollbarDisable = () => {
  window.onscroll = () => {
    window.scrollTo(scrollLeft, scrollTop);
  };
};

export const scrollbarEnable = () => {
  window.onscroll = () => {};
};

CodePudding user response：

Could you do something like this? When you open the modal/popup you could set the body overflow to true or not.

useEffect(() => {
    document.body.style.overflow = 'unset';
    if (popupOpen) {
        document.body.style.overflow = 'hidden';
    }
 }, [popupOpen]);

CodePudding user response：

May react-remove-scroll-bar be usefull.