如何让VSCode扩展Webview滚动条始终显示或修改其轨道颜色？

方案1：在Webview内部自定义滚动条样式 #

Webview基于Chromium内核，你可以直接在Webview的HTML/CSS中通过WebKit滚动条伪元素完全自定义样式，包括轨道背景色，还能强制滚动条始终显示：

/* 给需要滚动的容器添加此类，强制滚动条常驻 */
.scrollable-container {
  overflow-y: scroll;
}

/* 自定义滚动条轨道背景 */
.scrollable-container::-webkit-scrollbar-track {
  background-color: #2d2d2d; /* 深色主题下适配的轨道色，可按需调整 */
  border-radius: 4px;
}

/* 自定义滚动条滑块 */
.scrollable-container::-webkit-scrollbar-thumb {
  background-color: #555;
  border-radius: 4px;
}

/* 调整滚动条宽度 */
.scrollable-container::-webkit-scrollbar {
  width: 8px;
}

将上述CSS加入Webview的样式表，给目标容器添加scrollable-container类即可，这种方式完全不受VSCode默认主题样式限制，可控性最强。

方案2：通过VSCode全局设置调整滚动条行为 #

如果你希望让所有Webview（包括你的扩展）的滚动条始终显示，而非仅悬停时出现，可以修改VSCode用户设置：

打开设置（快捷键Ctrl+,/Cmd+,），添加以下配置：

"editor.scrollbar.vertical": "visible",
"webview.scrollbar.vertical": "visible"

同时可尝试调整滚动条相关颜色（部分主题支持）：

"workbench.colorCustomizations": {
  "scrollbarSlider.background": "#3a3a3a",
  "scrollbarSlider.hoverBackground": "#4a4a4a",
  /* 部分VSCode版本支持Webview专属滚动条颜色设置 */
  "webview.scrollbarSlider.background": "#3a3a3a"
}

注意：webview.scrollbarSlider相关配置仅在较新的VSCode稳定版中支持，建议保持版本更新。

方案3：通过扩展配置引导用户 #

作为扩展开发者，你可以在package.json中添加贡献点，引导用户配置相关选项，比如：

"contributes": {
  "configuration": {
    "title": "你的扩展名称",
    "properties": {
      "yourExtension.webviewScrollbarAlwaysVisible": {
        "type": "boolean",
        "default": false,
        "description": "强制Webview滚动条始终显示"
      }
    }
  }
}

之后在扩展激活逻辑中，根据用户配置动态调整Webview样式，或提示用户修改VSCode全局设置。

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