如何仅在页面存在滚动条时设置scrollbar-gutter属性？

方法1：JavaScript动态判断并添加类 #

这是最精准可靠的方案，通过检测页面内容高度与视口高度的关系，给需要滚动条的页面body添加专属类，再针对性设置scrollbar-gutter属性。

实现代码 #

JavaScript部分

function toggleScrollbarGutter() {
  const body = document.body;
  // 判断内容高度是否超过视口高度（会出现滚动条）
  const needsScrollbar = document.body.scrollHeight > window.innerHeight;
  // 动态添加/移除类
  body.classList.toggle('needs-scrollbar-gutter', needsScrollbar);
}

// 页面加载时初始化检查
toggleScrollbarGutter();
// 窗口大小变化时重新判断（避免窗口缩放导致状态变更）
window.addEventListener('resize', toggleScrollbarGutter);

CSS部分

/* 仅在需要滚动条的页面应用scrollbar-gutter */
body.needs-scrollbar-gutter {
  scrollbar-gutter: stable;
}

方法2：兼容旧浏览器的降级方案（备选） #

如果需要兼容不支持scrollbar-gutter的浏览器（比如Safari 15.3及以下），可以通过计算滚动条宽度，动态给body添加右侧内边距来模拟布局稳定效果：

function getScrollbarWidth() {
  const scrollDiv = document.createElement('div');
  scrollDiv.style.width = '100px';
  scrollDiv.style.height = '100px';
  scrollDiv.style.overflow = 'scroll';
  scrollDiv.style.visibility = 'hidden';
  document.body.appendChild(scrollDiv);
  const width = scrollDiv.offsetWidth - scrollDiv.clientWidth;
  document.body.removeChild(scrollDiv);
  return width;
}

function adjustBodyPadding() {
  const body = document.body;
  const needsScrollbar = document.body.scrollHeight > window.innerHeight;
  const scrollbarWidth = getScrollbarWidth();
  
  if (needsScrollbar) {
    body.style.paddingRight = `${scrollbarWidth}px`;
  } else {
    body.style.paddingRight = '';
  }
}

// 初始化+监听窗口缩放
adjustBodyPadding();
window.addEventListener('resize', adjustBodyPadding);

这种方法可以替代scrollbar-gutter的布局稳定作用，同时只在需要滚动条的页面生效。

配合弹窗逻辑说明 #

你的弹窗通过设置overflow-y: hidden禁用滚动时，已经应用scrollbar-gutter: stable的页面会保留滚动条槽的空间，不会出现布局偏移；而短页面因为没有触发该属性，也不会出现多余的滚动条槽，完美解决两种页面的显示问题。

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