如何让position:fixed固定元素遵循body的右侧内边距？

给body设置padding-right补偿滚动条宽度的方案存在天然缺陷：position: fixed的元素默认相对于视口定位，不受body的padding属性影响。滚动条消失后视口右侧边缘会向外移动等于滚动条宽度的距离，所有贴右侧布局的固定元素都会跟着偏移，逐个修改固定元素样式维护成本极高。

不需要逐个修改页面内的固定元素，根据项目兼容性需求二选一即可：

方案1：现代浏览器纯CSS方案（推荐） #

使用原生scrollbar-gutter属性，从根源上避免滚动条显隐带来的宽度变化，不需要写任何JS逻辑，也不需要手动计算滚动条宽度：

/* 全局添加，始终为滚动条预留等宽间隙 */
html {
  scrollbar-gutter: stable;
}

/* 菜单打开时仅需禁止滚动，无需额外加padding */
body.menu-opened {
  overflow-y: hidden;
}

该属性会让浏览器无论页面是否存在滚动条，都在右侧预留对应宽度的间隙，滚动条显隐时视口总宽度保持不变，普通文档流、fixed定位、sticky定位的元素都不会出现位置偏移，兼容性覆盖目前95%以上的活跃用户。

方案2：全兼容方案（支持老旧浏览器） #

如果需要兼容不支持scrollbar-gutter的老旧浏览器，只需要在菜单开关的全局逻辑里加一段统一处理代码，不需要单独修改任何固定元素的样式：

// 封装菜单打开时的滚动锁逻辑
function lockScroll() {
  const scrollBarWidth = window.innerWidth - document.documentElement.clientWidth;
  const html = document.documentElement;
  // 锁定html滚动，加边距补偿普通流内容
  html.style.overflow = 'hidden';
  html.style.paddingRight = `${scrollBarWidth}px`;
  // 全局查找所有固定、粘性定位元素，统一加边距补偿
  const allEls = document.body.querySelectorAll('*');
  allEls.forEach(el => {
    const pos = window.getComputedStyle(el).position;
    if (pos === 'fixed' || pos === 'sticky') {
      el.dataset.originPadding = el.style.paddingRight;
      el.style.paddingRight = `calc(${el.style.paddingRight || 0} + ${scrollBarWidth}px)`;
    }
  });
}

// 封装菜单关闭时的滚动恢复逻辑
function unlockScroll() {
  const html = document.documentElement;
  html.style.overflow = '';
  html.style.paddingRight = '';
  // 恢复所有固定、粘性元素的原有样式
  const allEls = document.body.querySelectorAll('*');
  allEls.forEach(el => {
    const pos = window.getComputedStyle(el).position;
    if (pos === 'fixed' || pos === 'sticky') {
      el.style.paddingRight = el.dataset.originPadding || '';
      delete el.dataset.originPadding;
    }
  });
}

后续只需要在菜单打开时调用lockScroll()，关闭时调用unlockScroll()即可，页面内所有固定元素的偏移都会被自动处理，新增固定元素时也不需要额外加适配代码。

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