The answer by Alohci is mostly correct, but here is some clarification that I needed when working through this.

If you want to add overflow: hidden on the body tag, but you want the scrollbar gutter to be applied, all you need to do is to apply scrollbar-gutter to the html tag.

.html {
   scrollbar-gutter: stable;
}

.body {
   overflow: hidden;
}

(Alohci's answer had overflow: hidden on the html tag and that's not necessary, or applies to what the OP was asking.)

In our case, we are setting the overflow: hidden to the body tag via JavaScript when an event is triggered.