如何去除Monaco Editor滚动条透明度，避免文本透过滚动条显示？

以下是几个有效解决方法，按优先级推荐：

1. 修改滚动条配置为完全不透明颜色 #

把滑块和轨道的颜色改成完全不透明的十六进制色值，替代原来带透明度的rgba：

<Editor
  height="100%"
  defaultValue={''}
  theme={mode === 'dark' ? 'vs-dark' : 'light'}
  language="html"
  value={props.value ?? ''}
  onChange={handleChange}
  options={{
    minimap: { enabled: false },
    lineNumbersMinChars: 2,
    readOnly: props.readOnly,
    scrollbar: {
      // 滚动条轨道背景（完全不透明）
      backgroundColor: mode === 'dark' ? '#2d2d2d' : '#f5f5f5',
      // 滑块默认状态（完全不透明）
      sliderBackground: mode === 'dark' ? '#666666' : '#bbbbbb',
      // 滑块激活状态（完全不透明）
      activeSliderBackground: mode === 'dark' ? '#888888' : '#999999',
      // 固定滚动条宽度，确保布局稳定
      verticalScrollbarSize: 12
    },
    // 内容区右侧留足滚动条宽度的内边距，避免文本被覆盖
    padding: { right: 15 },
    alwaysConsumeMouseWheel: true,
  }}
  onMount={handleEditorMount}
/>

2. 自定义CSS强制覆盖滚动条样式 #

如果配置项不生效，直接通过CSS强制修改Monaco滚动条的DOM样式：

/* 暗色主题滚动条样式 */
.monaco-editor.vs-dark .scrollbar.vertical {
  background-color: #2d2d2d !important;
}
.monaco-editor.vs-dark .scrollbar.vertical .slider {
  background-color: #666 !important;
  opacity: 1 !important;
}
.monaco-editor.vs-dark .scrollbar.vertical .slider:hover {
  background-color: #888 !important;
}

/* 亮色主题滚动条样式 */
.monaco-editor.light .scrollbar.vertical {
  background-color: #f5f5f5 !important;
}
.monaco-editor.light .scrollbar.vertical .slider {
  background-color: #bbb !important;
  opacity: 1 !important;
}
.monaco-editor.light .scrollbar.vertical .slider:hover {
  background-color: #999 !important;
}

将这段CSS添加到全局样式文件，或通过组件样式注入工具（如styled-components）添加到编辑器所在组件内。

3. 动态调整内容区边距 #

如果文本仍与滚动条重叠，可在编辑器挂载后，根据滚动条实际宽度动态设置内容边距：

const handleEditorMount = (editor) => {
  const scrollbarWidth = editor.getConfiguration().scrollbar.verticalScrollbarSize;
  // 内容区右侧添加滚动条宽度+额外留白的边距
  editor.updateOptions({
    padding: { right: scrollbarWidth + 3 }
  });
};

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