disable (note hide) vertical scroll when the modal is open

Question

When the modal is open, it is not ideal to keep vertical scrolling. Thats why in the useEffect of my component I did this:

if (state.modal) {
  document.body.style.overflow = "hidden";
  document.body.style.paddingRight = "17px";
}

return () => {
  document.body.style.overflow = "unset";
  document.body.style.paddingRight = "0px";
};

Although, it hides the scrollbar, now the problem is, the browser is moved because of scrollbar hiding and show.

so that, I want to keep the scroll bar but disable it when the modal is open.

Maybe this can help you https://stackoverflow.com/questions/4770025/how-to-disable-scrolling-temporarily — hungdoansy, Nov 18 '20 at 06:31

score 0 · Accepted Answer · answered Nov 18 '20 at 07:19

Here is a way of solving this. hope it will work.

on your useEffect do the following:

if (state.modal) {
  document.body.style.position = "fixed";
  document.body.style.width = "100%";
  document.body.style.overflowY = "scroll";
}

return () => {
  document.body.style.position = "static";
  document.body.style.overflow = "unset";
};

disable (note hide) vertical scroll when the modal is open

1 Answers1