React组件在MacOS浏览器出现滚动条位置白边问题求助

• MacOS系统滚动条设置差异：部分用户开启了「始终显示滚动条」的系统偏好设置，此时浏览器会为滚动容器预留固定宽度的滚动条空间；而你本地可能设置的是「自动显示」（滚动条悬浮透明，不占用空间），两边渲染逻辑不一致，预留的空间没被组件内容填充，就露出了白边。
• 浏览器内核的滚动容器计算差异：Chrome/Brave（Chromium内核）和Safari（WebKit内核）在MacOS下，对滚动容器的盒模型计算存在细微差别，当容器设置固定宽度（比如100%）时，滚动条的宽度会被额外计算，挤压内容区域或导致容器边缘出现空白。

方案1：隐藏滚动条（保留滚动功能） #

直接针对WebKit/Chromium内核的浏览器隐藏滚动条，配合已有的Firefox/IE属性，实现全浏览器滚动条隐藏，从根源消除白边：

.scroll-container {
  overflow: scroll;
  /* 针对Firefox/IE */
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* 针对Chrome/Brave/Safari */
.scroll-container::-webkit-scrollbar {
  display: none;
}

React内联样式写法：

const scrollContainerStyle = {
  overflow: 'scroll',
  msOverflowStyle: 'none',
  scrollbarWidth: 'none'
};

<div style={scrollContainerStyle} className="scroll-container">
  {/* 组件内容 */}
</div>

方案2：预留滚动条空间 #

给滚动容器添加内边距，抵消滚动条占用的宽度（MacOS默认滚动条宽度约15px），适配「始终显示滚动条」的场景：

.scroll-container {
  overflow: scroll;
  /* 根据滚动方向选择，垂直滚动加右侧内边距，水平滚动加底部 */
  padding-right: 15px;
}

如果想要更精准的动态计算，可以用CSS变量获取滚动条宽度：

.scroll-container {
  overflow: scroll;
  --scrollbar-width: calc(100vw - 100%);
  padding-right: var(--scrollbar-width);
}

方案3：自适应容器宽度 #

避免给滚动容器设置固定宽度，改用自适应宽度，让容器根据内容和滚动条自动调整：

.scroll-container {
  overflow: scroll;
  width: fit-content;
  max-width: 100%;
}

内容的提问来源于stack exchange，提问作者F.Fabian