自定义滚动条样式问题：移除可滚动div右下角白框

问题现象 #

配置自定义滚动条样式后，带terminal-content类的可滚动div右下角出现白色方框，其他同样式的容器无此问题。相关代码如下：

JSX代码 #

<Grid item xs={12} md={8}>
  <div className="terminal">
    <div className="terminal-header white-text" style={{ position: 'relative' }}>
      <div className="content-row" style={{ padding: '10px' }}>
        <PublicIcon />
        <span style={{ marginLeft: '10px' }}>Custom Header Options</span>
      </div>
    </div>
    <div className="terminal-content white-text" style={{ maxHeight: '250px', overflowX: 'scroll' }}>
      {customHeaders.length > 0
        ?
        <table>
          <thead>
            <tr>
              <th style={{ backgroundColor: '#562484', position: 'sticky', top: '0', width: '50%' }}>Key</th>
              <th style={{ backgroundColor: '#562484', position: 'sticky', top: '0', width: '50%' }}>Value</th>
              <th style={{ backgroundColor: '#562484', position: 'sticky', top: '0', width: '10%' }}></th>
            </tr>
          </thead>
          <tbody>
            {customHeaders.map((header, index) => {
              return (
                <tr>
                  <td>{header.key.length > 15 ? header.key.slice(0, 12) + "..." : header.key}</td>
                  <td>{header.value.length > 15 ? header.value.slice(0, 12) + "..." : header.value}</td>
                  <td><DeleteForeverIcon /></td>
                </tr>
              )
            })}
          </tbody>
        </table>
        : null}
      {customHeaders.length == 0
        ? <span style={{ margin: '0 auto' }}>There are no custom headers added to this monitor</span>
        : null
      }
    </div>
  </div>
</Grid>

CSS代码 #

* {
  scrollbar-width: thin;
  scrollbar-color: #623CEA;
}

/* Works on Chrome, Edge, and Safari */
*::-webkit-scrollbar {
  width: 12px;
}

*::-webkit-scrollbar-track {
  background: #623CEA;
}

.terminal-content::-webkit-scrollbar-track {
  background: #562484;
}

*::-webkit-scrollbar-thumb {
  background-color: #623CEA;
  border-radius: 20px;
  border: 3px solid rgb(57, 57, 57);
}

问题根源 #

1. 表格列宽总和50%+50%+10%=110%，超出容器宽度，强制触发了水平滚动；
2. 滚动条轨道的背景色与容器背景色不一致，加上滚动条圆角/边框的设置，导致角落出现未被覆盖的空白区域。

修复方案 #

方案1：修正表格列宽，消除不必要的水平滚动 #

把表格列宽总和调整为100%，避免强制水平滚动：

<thead>
  <tr>
    <th style={{ backgroundColor: '#562484', position: 'sticky', top: '0', width: '45%' }}>Key</th>
    <th style={{ backgroundColor: '#562484', position: 'sticky', top: '0', width: '45%' }}>Value</th>
    <th style={{ backgroundColor: '#562484', position: 'sticky', top: '0', width: '10%' }}></th>
  </tr>
</thead>

方案2：统一容器与滚动条轨道的背景色 #

给terminal-content设置和滚动条轨道一致的背景色，填补间隙：

.terminal-content {
  background-color: #562484; /* 和滚动条轨道背景匹配 */
}

方案3：调整滚动条样式，消除边框间隙 #

把滚动条滑块的边框颜色改成和轨道一致，避免边框露出底色：

.terminal-content::-webkit-scrollbar-thumb {
  border: 3px solid #562484; /* 替换原有的rgb(57,57,57) */
}

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