使用vw单位的translateX在页面有滚动条时出现间距不均的原因与解法

出现这个偏差的核心是vw单位的计算规则和滚动条的布局占位特性冲突：

• 1vw等于完整视口宽度的1%，计算时会包含垂直滚动条的占位宽度
• 页面内容的实际可用布局宽度 = 视口总宽度 - 滚动条宽度，二者的差值就是滚动条的宽度
  你的原始CSS中用50vw作为位移计算基准，相当于把滚动条的宽度也计入了平移距离，导致左侧ul向左平移的距离比实际需要的多了一个滚动条宽度，最终表现就是左侧剩余间距小于右侧。

1. JS动态补偿（你当前使用的方案） #

你通过计算滚动条宽度叠加到位移值的方案逻辑完全正确，就是手动补上vw计算值和实际布局宽度的差值，代码可正常运行：

let scrollbarWidth = window.innerWidth - document.body.offsetWidth;

window.addEventListener('scroll', function() {
    // 滚动时导航菜单位移动画
    if (window.scrollY >= 10) {
        navContainer.classList.add('scrolled');
        navItemContainer.style.transform = `translateX(calc(-45vw + 100% + ${scrollbarWidth}px))`;
    } else {
        navContainer.classList.remove('scrolled');
        navItemContainer.removeAttribute('style');
    }
});

2. 纯CSS实现（无需JS，兼容性更好） #

如果不想引入JS逻辑，可以把位移的计算基准从vw换成基于父元素的百分比：nav本身是全屏宽度布局，50%相对于nav的宽度计算，就是实际可用布局宽度的50%，不会包含滚动条宽度，天然规避差值问题：

nav {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%; /* 确保父元素宽度为实际可用布局宽度 */
}

.nav-container.scrolled nav .nav-item__container:nth-child(1) {
  transform: translateX(calc(-50% + 100%));
}

.nav-container.scrolled nav .nav-item__container:nth-child(2) {
  transform: translateX(calc(50% - 100%));
}

3. 消除滚动条占位（从根源解决） #

如果业务场景允许，可以设置滚动条为悬浮模式，不占用布局空间，直接消除差值：

/* 滚动条悬浮在内容上方，不占用布局宽度 */
body {
  overflow-y: overlay;
}

/* 可选：自定义滚动条样式优化显示效果 */
::-webkit-scrollbar {
  width: 8px;
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: rgba(0,0,0,0.2);
  border-radius: 4px;
}

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