isBodyOverflowing returns false when overflow-y: scroll is set on body

[mleister97]

Hi team,

I'm encountering an issue with the isBodyOverflowing method in the context of a web app where the scrollbar should always be visible — even if the content does not actually overflow.

To achieve this consistent scrollbar behavior, I set:

body {
  overflow-y: scroll;
}

However, isBodyOverflowing still returns false in this case, since the body technically isn't overflowing. This results in a visual jump ("modal shift") when opening a dialog from a non-scrollable page — the scrollbar is already present, but no padding is applied because the method believes there's no overflow.

This is problematic in cases where the app switches frequently between scrollable and non-scrollable pages, and a consistent layout is desired.

Suggestions:

• Could isBodyOverflowing consider overflow-y: scroll as a special case and return true if a scrollbar is always visible?
• Alternatively, would it be possible to expose a way to override the internal state, so developers can control this behavior manually?

I'm using Ant Design, and this behavior leads to inconsistent UI when opening modals. A way to opt into always applying padding in this case would be very helpful.

Thanks!

Related method: portal/src/util.ts

export function isBodyOverflowing() {
  return (
    document.body.scrollHeight >
      (window.innerHeight || document.documentElement.clientHeight) &&
    window.innerWidth > document.body.offsetWidth
  );
}

Suggestion

export function isBodyOverflowing() {
  if (window.getComputedStyle(document.body).overflowY === 'scroll') return true;

  return (
    document.body.scrollHeight >
      (window.innerHeight || document.documentElement.clientHeight) &&
    window.innerWidth > document.body.offsetWidth
  );
}

[mleister97]

Created PR, which will fix the issue #26

If you want to see the issue in action, I created this CodeSandbox: https://codesandbox.io/p/sandbox/wonderful-darwin-72j6h9
In this example, you can observe that the green area changes its width when opening the modal due to the current logic.