自定义CSS样式双滚动条右下角白色方块如何隐藏？

一、消除右下角白色方块 #

那个白色方块是WebKit内核浏览器里横向+纵向滚动条的交汇角落区域，默认继承浏览器或父元素的默认样式，只需针对这个区域添加CSS样式即可解决：

方案1：设置匹配背景色 #

让角落颜色和滚动条轨道/容器背景统一，比如和你的红色轨道一致：

/* 滚动条角落区域样式 */
::-webkit-scrollbar-corner {
  background: red; /* 和轨道颜色匹配 */
}

如果想和容器粉色背景统一，就把值改成pink。

方案2：直接隐藏角落 #

如果不需要这个角落区域，也可以直接隐藏：

::-webkit-scrollbar-corner {
  display: none;
}

二、复现类似Stack Overflow的美观滚动条效果 #

Stack Overflow的滚动条是兼顾跨浏览器兼容性的自定义样式，核心是针对不同内核浏览器做适配：

1. WebKit内核（Chrome、Safari、Edge Chromium） #

基于你现有的样式，补充细节即可，比如圆角、hover效果优化：

/* 指定容器的滚动条 */
.box::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
.box::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 4px;
}
.box::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 4px;
}
.box::-webkit-scrollbar-thumb:hover {
  background: #a8a8a8;
}
.box::-webkit-scrollbar-corner {
  background: #f1f1f1; /* 和轨道颜色统一，避免白块 */
}

2. Firefox浏览器适配 #

Firefox支持标准滚动条属性，无需伪元素，直接在容器上设置：

.box {
  /* 设置滚动条宽度：auto/thin/none */
  scrollbar-width: thin;
  /* 设置滑块+轨道颜色：[滑块色] [轨道色] */
  scrollbar-color: #c1c1c1 #f1f1f1;
}

3. 完整兼容示例 #

把两种适配结合，就能实现跨浏览器的统一美观效果：

.box {
  border: 1px solid black;
  width: 5em;
  height: 5em;
  overflow: scroll;
  background: pink;
  /* Firefox适配 */
  scrollbar-width: thin;
  scrollbar-color: #000 red;
}

/* WebKit适配 */
.box::-webkit-scrollbar {
  width: .5rem;
  height: .5rem;
}
.box::-webkit-scrollbar-track {
  background: red;
}
.box::-webkit-scrollbar-thumb {
  background: rgb(0, 0, 0);
  border-radius: 5em;
}
.box::-webkit-scrollbar-thumb:hover {
  background: #555;
}
/* 解决角落白块 */
.box::-webkit-scrollbar-corner {
  background: red;
}

注意事项 #

• 若想全局应用滚动条样式，去掉.box前缀直接写::-webkit-scrollbar即可，但建议优先给指定容器设置，避免影响全局元素。
• 旧版Edge（非Chromium内核）不支持WebKit滚动条样式，目前该版本已基本淘汰，无需额外适配。

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