移除body滚动条时如何避免固定元素发生偏移？

我正在解决一个棘手的问题，相信存在尚未发现的解决方案。我查阅了多篇类似《Prevent Page Scrolling When a Modal is Open》的文章，但都没有提到**fixed element "shift"（固定元素偏移）**的问题。

什么是固定元素偏移？点击汉堡图标后，红色按钮会向右偏移，效果如下：

当前实现逻辑：
打开全屏菜单时，我通过JavaScript修改body样式，设置overflow和padding-right：

• ✅ 已解决：避免body内容（蓝色区域）偏移——通过将body的padding-right设为当前滚动条宽度实现。
• 🛑 未解决：避免固定元素（红色按钮）偏移。

当前使用的JavaScript代码：

const openMenu = e => {
  e.preventDefault();

  // ...
  
  // 修改body样式
  Object.assign(document.body.style, {
    'overflow': 'hidden',
    'padding-right': `${window.innerWidth - document.documentElement.clientWidth}px`,
  });
};

const closeMenu = e => {
  e.preventDefault();
  
  // ...
  
  // 移除body样式
  document.body.removeAttribute('style');
};

补充说明：该问题仅出现在Windows系统的Chrome 105、Edge 105浏览器中，Firefox 104无此问题。

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