如何通过CSS让Chromium使用overlay滚动条？

首先明确：Chromium的overlay滚动条行为通常由浏览器级标志或平台设置控制，但在Vuplex这类内嵌WebView场景下，可通过CSS模拟、WebView配置结合的方式解决，以下是具体方案：

一、CSS模拟Overlay滚动条（无需修改WebView配置） #

如果无法调整WebView的Chromium启动参数，最可靠的方式是用CSS+JS模拟overlay滚动条的悬浮效果，确保滚动条不占用布局空间：

核心代码示例 #

/* 隐藏原生滚动条 */
.scroll-container::-webkit-scrollbar {
  display: none;
}

/* 可滚动容器基础样式 */
.scroll-container {
  position: relative;
  overflow: auto;
  /* 预留少量右侧内边距，避免内容被自定义滚动条遮挡 */
  padding-right: 8px;
}

/* 自定义overlay滚动条容器 */
.custom-scrollbar {
  position: absolute;
  top: 0;
  right: 0;
  width: 6px;
  height: 100%;
  background-color: rgba(0,0,0,0.1);
  border-radius: 3px;
  opacity: 0;
  transition: opacity 0.2s;
  pointer-events: none;
  z-index: 10;
}

/* 交互时显示滚动条 */
.scroll-container:hover .custom-scrollbar,
.scroll-container:focus-within .custom-scrollbar,
.scroll-container:active .custom-scrollbar {
  opacity: 1;
  pointer-events: auto;
}

/* 滚动条滑块样式 */
.custom-scrollbar-thumb {
  width: 100%;
  background-color: rgba(0,0,0,0.3);
  border-radius: 3px;
  position: absolute;
  cursor: pointer;
}

配合JavaScript同步滚动位置：

const container = document.querySelector('.scroll-container');
const scrollbarThumb = document.querySelector('.custom-scrollbar-thumb');

// 同步滑块与容器滚动位置
container.addEventListener('scroll', () => {
  const scrollRatio = container.scrollTop / (container.scrollHeight - container.clientHeight);
  const thumbHeight = (container.clientHeight / container.scrollHeight) * 100;
  scrollbarThumb.style.top = `${scrollRatio * 100}%`;
  scrollbarThumb.style.height = `${thumbHeight}%`;
});

// 支持滑块拖动滚动
let isDragging = false;
scrollbarThumb.addEventListener('mousedown', (e) => {
  isDragging = true;
  e.preventDefault();
});

document.addEventListener('mousemove', (e) => {
  if (!isDragging) return;
  const scrollbar = document.querySelector('.custom-scrollbar');
  const barRect = scrollbar.getBoundingClientRect();
  const yOffset = e.clientY - barRect.top;
  const scrollRatio = yOffset / barRect.height;
  container.scrollTop = scrollRatio * (container.scrollHeight - container.clientHeight);
});

document.addEventListener('mouseup', () => {
  isDragging = false;
});

二、修改Vuplex WebView的Chromium启动参数 #

如果你的应用有权限调整Vuplex初始化配置，可尝试添加Chromium启动标志强制启用overlay滚动条：

• 核心标志：--enable-overlay-scrollbar，部分平台需配合--overlay-scrollbar-style=overlay
• 以Unity平台为例，初始化Vuplex时添加参数：

var webViewPrefab = GameObject.FindObjectOfType<WebViewPrefab>();
webViewPrefab.Initialized += (sender, e) => {
  var webView = webViewPrefab.WebView;
#if UNITY_ANDROID || UNITY_IOS
  webView.SetChromiumCommandLineArguments("--enable-overlay-scrollbar");
#endif
};

注意：该方案依赖Vuplex对应的Chromium版本支持，需实际测试验证。

三、关于scrollbar-gutter的说明 #

scrollbar-gutter的作用是预留滚动条空间避免布局跳动，它无法强制启用overlay滚动条——因为overlay滚动条的核心是不占用布局空间，而scrollbar-gutter本质是为classic滚动条设计的布局优化属性，所以你之前遇到的滚动条占用空间问题是该属性的正常表现，不适用于实现overlay效果。

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