如何在Delphi的TMS Web Core中修改TWebPanel/TWebScrollBox滚动条样式？

要实现滚动条的透明度、圆角调整，以及仅滚动时显示的效果，核心问题在于Chrome等WebKit内核浏览器与Firefox的滚动条CSS语法不兼容——你之前用的scrollbar-color和scrollbar-width仅Firefox支持，Chrome需要用专属的伪元素选择器。以下是完整解决方案：

1. 用自定义CSS类实现跨浏览器样式 #

通过TWebCSSClass组件添加以下CSS代码，覆盖WebKit和Firefox的滚动条样式：

/* 基础样式：默认隐藏滚动条 */
.custom-scrollbar {
  /* Firefox 默认隐藏 */
  scrollbar-width: none;
  /* IE/Edge 默认隐藏 */
  -ms-overflow-style: none;
  /* 确保容器可滚动 */
  overflow-y: auto;
}

/* WebKit内核（Chrome/Edge等）默认隐藏滚动条 */
.custom-scrollbar::-webkit-scrollbar {
  display: none;
  width: 8px;
}

/* 滚动/悬停/聚焦时显示滚动条 */
.custom-scrollbar.show-scrollbar::-webkit-scrollbar,
.custom-scrollbar:hover::-webkit-scrollbar {
  display: block;
}

/* WebKit滚动条轨道样式（圆角+透明度） */
.custom-scrollbar::-webkit-scrollbar-track {
  background: rgba(245, 245, 245, 0.3);
  border-radius: 4px;
}

/* WebKit滚动条滑块样式（圆角+透明度） */
.custom-scrollbar::-webkit-scrollbar-thumb {
  background: rgba(120, 120, 120, 0.5);
  border-radius: 4px;
}

/* Firefox滚动条样式（通过颜色透明度模拟圆角，自定义滑块/轨道颜色） */
.custom-scrollbar.show-scrollbar,
.custom-scrollbar:hover {
  scrollbar-width: thin;
  scrollbar-color: rgba(120, 120, 120, 0.5) rgba(245, 245, 245, 0.3);
}

2. 应用CSS类到组件 #

直接将TWebPanel或TWebScrollBox的CSSClass属性设置为custom-scrollbar即可。如果需要动态添加，也可以通过代码实现：

WebPanel1.ElementHandle.classList.add('custom-scrollbar');

3. 实现「仅滚动时显示」的精准效果 #

如果需要滚动时显示、停止后自动隐藏（而非悬停触发），可以通过JavaScript监听滚动事件：
在窗体的OnCreate或组件的OnInitialize事件中添加以下代码：

var
  JSCode: string;
begin
  JSCode := Format(
    'const panel = document.getElementById("%s");' +
    'panel.addEventListener("scroll", function() {' +
    '  this.classList.add("show-scrollbar");' +
    '  clearTimeout(this.scrollTimer);' +
    '  // 滚动停止1秒后隐藏滚动条' +
    '  this.scrollTimer = setTimeout(() => this.classList.remove("show-scrollbar"), 1000);' +
    '});',
    [WebPanel1.ElementID]
  );
  WebApplication.ExecuteJavaScript(JSCode);
end;

关键说明 #

• WebKit浏览器必须通过::-webkit-scrollbar系列伪元素定制滚动条，不支持scrollbar-color/scrollbar-width
• Firefox的滚动条圆角无法直接设置，只能通过调整滑块/轨道的颜色透明度模拟视觉效果
• 动态监听滚动事件可以更精准地控制滚动条的显示时机，比悬停触发更贴合需求

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