如何在WPF中移除滚动条箭头、修改颜色并设置圆角？

不同浏览器的滚动条样式需要用不同的CSS伪元素控制，以下是主流浏览器的实现方案：

Webkit内核浏览器（Chrome、Edge、Safari等） #

通过Webkit专属伪元素可以精细调整滚动条样式：

/* 定义滚动条基础尺寸 */
::-webkit-scrollbar {
  width: 12px; /* 垂直滚动条宽度 */
  height: 12px; /* 水平滚动条高度 */
}

/* 隐藏滚动条箭头按钮 */
::-webkit-scrollbar-button {
  display: none;
}

/* 滚动条轨道样式 */
::-webkit-scrollbar-track {
  background-color: #f1f1f1; /* 轨道背景色 */
  border-radius: 6px; /* 轨道圆角 */
}

/* 滚动条滑块样式 */
::-webkit-scrollbar-thumb {
  background-color: #888; /* 滑块默认颜色 */
  border-radius: 6px; /* 滑块圆角 */
}

/* 滑块hover状态优化 */
::-webkit-scrollbar-thumb:hover {
  background-color: #555; /* hover时的深色效果 */
}

Firefox浏览器 #

Firefox支持标准滚动条属性，搭配伪元素隐藏箭头：

/* 全局滚动条基础设置 */
* {
  scrollbar-width: thin; /* 可选auto/thin/none，thin会简化箭头显示 */
  scrollbar-color: #888 #f1f1f1; /* 滑块颜色 轨道颜色 */
}

/* 隐藏滚动条箭头按钮 */
::-moz-scrollbar-button {
  display: none;
}

/* 滚动条滑块圆角 */
::-moz-scrollbar-thumb {
  border-radius: 6px;
}

/* 滚动条轨道圆角 */
::-moz-scrollbar-track {
  border-radius: 6px;
}

如果只需给特定元素设置样式，把上述选择器替换为目标元素的选择器即可（比如.custom-box::-webkit-scrollbar）。

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