如何利用CSS或JavaScript考虑滚动条宽度，调整右侧按钮的位置或宽度

嘿，这个问题挺常见的，尤其是不同系统（Windows/Mac）滚动条样式差异大的情况下，很容易出现按钮被遮挡的情况。我给你分享几个靠谱的解决方案，分纯CSS和JS结合的方法，你可以根据自己的布局需求选择：

方法一：纯CSS技巧（最简便） #

不需要写任何JS，利用CSS的calc()自动计算滚动条宽度，让按钮自动避开滚动条。原理是100vw是视口总宽度（包含滚动条），而100%是页面内容区域宽度（不含滚动条），两者的差值正好是滚动条的宽度。

把你的按钮样式改成这样：

#menuBtn {
  /* 假设你的按钮是固定定位，根据实际布局调整定位方式 */
  position: fixed;
  top: 20px;
  right: 0;
  /* 关键：用这个calc值设置右侧外边距 */
  margin-right: calc(100vw - 100%);
  /* 其他自定义样式 */
  width: 40px;
  height: 40px;
  background-color: #2c3e50;
  cursor: pointer;
}

这个方法的好处是完全不需要JS，自动适配有无滚动条的场景，兼容性也很好（除了非常老旧的浏览器，现在基本不用考虑）。

方法二：JS计算滚动条宽度 + CSS变量（更灵活） #

如果你的布局比较复杂，纯CSS方法不适用，可以用JS先计算出滚动条的实际宽度，再通过CSS变量把这个值应用到按钮样式上。

步骤1：写一个计算滚动条宽度的函数 #

function getScrollbarWidth() {
  // 创建临时隐藏元素来测量滚动条宽度
  const tempScrollDiv = document.createElement('div');
  tempScrollDiv.style.cssText = `
    width: 100px;
    height: 100px;
    overflow: scroll;
    position: absolute;
    top: -9999px;
    visibility: hidden;
  `;
  document.body.appendChild(tempScrollDiv);
  // 偏移宽度减去内容宽度就是滚动条的实际宽度
  const scrollbarWidth = tempScrollDiv.offsetWidth - tempScrollDiv.clientWidth;
  document.body.removeChild(tempScrollDiv);
  return scrollbarWidth;
}

步骤2：把宽度赋值给CSS变量并应用到按钮 #

先在CSS里定义一个全局变量：

:root {
  --scrollbar-width: 0px;
}

#menuBtn {
  position: fixed;
  top: 20px;
  /* 用CSS变量设置右侧定位值 */
  right: var(--scrollbar-width);
  width: 40px;
  height: 40px;
  background-color: #2c3e50;
  cursor: pointer;
}

然后用JS设置这个变量，并且监听窗口大小变化（避免窗口 resize 后滚动条宽度变化）：

function updateScrollbarWidth() {
  const width = getScrollbarWidth();
  document.documentElement.style.setProperty('--scrollbar-width', `${width}px`);
}

// 页面加载时初始化
window.addEventListener('load', updateScrollbarWidth);
// 窗口大小改变时重新计算
window.addEventListener('resize', updateScrollbarWidth);

这个方法的优势是可以把滚动条宽度变量用到其他需要适配的元素上，灵活性更高。

额外提示 #

如果你的按钮是放在position: relative的容器里（比如你的#menu），记得调整好定位的参考容器，避免出现位置偏移问题。测试时可以在Windows和Mac系统都试一下，确保滚动条的适配效果符合预期。

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