如何禁止设置overflow:hidden的元素通过focus等方法滚动？

overflow: hidden 可以阻止用户通过输入设备滚动元素，但调用 focus()、scrollIntoView() 等方法时，仍会触发元素滚动。我需要用 overflow: hidden 隐藏部分内容，但对隐藏区域内的input调用 focus() 时，浏览器有时会滚动带 overflow: hidden 属性的元素，导致隐藏内容暴露。

以下是复现示例，其中右侧元素应始终保持隐藏：

示例代码 #

HTML

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

CSS

body {
  overflow: hidden;
  margin: 0;
}

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

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

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

JavaScript

document.querySelector('input').focus();
// document.querySelector('.right').scrollIntoView(); 同样会触发问题

给 .right 添加 position: fixed 可以解决这个问题，但会引发其他样式问题。有没有办法不使用 position: fixed 实现body完全不可滚动？

这个问题源于React中，当隐藏的input带有 autoFocus 属性时，React会自动调用 focus() 方法。即便添加lint规则禁用React的 autoFocus，仍可能有人手动调用 focus() 触发这个bug。

内容的提问来源于stack exchange，提问作者Leo Jiang