Prevent scrolling on element with “overflow: hidden”?

overflow: hidden prevents users from scrolling with input devices, but it’s still possible to scroll the element with focus(), scrollIntoView(), etc. I have some content that should be hidden with overflow: hidden, but calling focus() on a hidden input sometimes causes the browser to scroll the overflow: hidden element and reveal the hidden content.

Here’s a demo where the right element should always be hidden:

document.querySelector('input').focus();
// document.querySelector('.right').scrollIntoView(); works too

body {
  overflow: hidden;
  margin: 0;
}

.container {
  width: 200vw;
  display: flex;
}

.left {
  width: 100vw;
  border: 1px solid red;
}

.right {
  width: 100vw;
  border: 1px solid blue;
}

<div class="container">
  <div class="left">left</div>
  <div class="right">
    right
    <input />
  </div>
</div>

Adding position: fixed to .right fixes this issue, but it introduces other styling issues. Is it possible to make body never scrollable without using position: fixed?

The issue I’m facing is caused by React calling focus() when a hidden input has the autoFocus property. It’s called in ReactDOMHostConfig’s commitMount. Even if I add a lint rule to disable React’s autoFocus, it’s likely that someone will call focus() and cause a bug.