如何修改Scrollbar滚动条的背景色与按钮颜色？

你之前尝试直接赋值修改颜色报错的原因是系统原生Scrollbar控件默认没有公开ButtonBackColor这类可直接修改按钮配色的属性，需要根据你使用的技术栈选择对应实现方式： #

WinForm 环境实现 #

1. 先将Scrollbar控件的DrawMode属性设置为OwnerDrawFixed，开启控件自绘权限
2. 绑定DrawScrollBar事件，在事件中自行绘制背景、按钮、滑块的样式，参考代码如下：

private void Scrollbar1_DrawScrollBar(object sender, DrawScrollBarEventArgs e)
{
    // 绘制滚动条整体背景
    e.Graphics.FillRectangle(Brushes.Black, e.ClipRectangle);

    // 绘制两端滚动按钮
    if (e.Type is ScrollBarDrawItem.FirstButton or ScrollBarDrawItem.LastButton)
    {
        // 自定义按钮背景色
        e.Graphics.FillRectangle(Brushes.Gray, e.Bounds);
        // 可自行添加箭头绘制逻辑
    }

    // 绘制滑块
    if (e.Type == ScrollBarDrawItem.Thumb)
    {
        e.Graphics.FillRectangle(Brushes.DarkGray, e.Bounds);
    }
}

如果你不想自行实现自绘逻辑，也可以直接替换为第三方自定义滚动条控件，规避原生控件的限制。 #

WPF 环境实现 #

WPF框架下可以直接通过重写ScrollBar的控件模板实现自定义配色，无需处理自绘逻辑，参考样式代码如下：

<Style TargetType="ScrollBar">
    <!-- 滚动条整体背景色 -->
    <Setter Property="Background" Value="Black"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="ScrollBar">
                <Grid>
                    <Grid.RowDefinitions>
                        <RowDefinition Height="Auto"/>
                        <RowDefinition Height="*"/>
                        <RowDefinition Height="Auto"/>
                    </Grid.RowDefinitions>
                    <!-- 顶部/左侧滚动按钮 -->
                    <RepeatButton Grid.Row="0" Background="Gray" Command="ScrollBar.LineUpCommand"/>
                    <!-- 滑块区域 -->
                    <Track Grid.Row="1" IsDirectionReversed="True">
                        <Track.DecreaseRepeatButton>
                            <RepeatButton Background="Black" Command="ScrollBar.PageUpCommand"/>
                        </Track.DecreaseRepeatButton>
                        <Track.Thumb>
                            <Thumb Background="DarkGray"/>
                        </Track.Thumb>
                        <Track.IncreaseRepeatButton>
                            <RepeatButton Background="Black" Command="ScrollBar.PageDownCommand"/>
                        </Track.IncreaseRepeatButton>
                    </Track>
                    <!-- 底部/右侧滚动按钮 -->
                    <RepeatButton Grid.Row="2" Background="Gray" Command="ScrollBar.LineDownCommand"/>
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

Web 前端环境实现 #

如果是网页中的滚动条，直接通过CSS伪类配置即可，参考代码：

/* 滚动条整体 */
::-webkit-scrollbar {
  background-color: black;
  width: 10px;
}
/* 滚动按钮 */
::-webkit-scrollbar-button {
  background-color: gray;
}
/* 滑块 */
::-webkit-scrollbar-thumb {
  background-color: darkgray;
}

注：以上CSS方案仅适配webkit内核浏览器，如需兼容更多浏览器可配合JS自定义滚动条组件实现。

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