HTML/CSS可滚动div滚动条高度异常如border-right的修复方法

你遇到的滚动条外观异常，来自CSS自定义滚动条写法的两处疏漏：

• 你在自定义滚动条样式时，只给全局::-webkit-scrollbar伪元素设置了红色背景，完全没有单独定义滚动条的可拖动滑块、轨道的独立样式规则。
  Webkit内核浏览器的滚动条自定义逻辑是：一旦你手动触发了::-webkit-scrollbar的样式设置，浏览器就会接管整个滚动条的渲染，原本默认的分层结构（轨道+可拖动滑块）会完全失效，所有的分层样式都需要你手动书写。如果你只给滚动条的最外层容器设了纯色背景，没有明确给滑块写外观、尺寸规则，浏览器就不会拆分渲染可拖动的滑块结构，整个滚动条区域会被你设置的红色背景完全填满，最终视觉上就是一整条从div顶部延伸到底部的纯色竖条，和border-right的外观没有区别。
• 你没有给自定义滚动条设置明确的宽度，不过这不是造成外观异常的核心因素。

在你原有滚动条样式的基础上，补充滑块和轨道的独立样式规则即可：

/* 先给滚动条整体设置明确宽度 */
::-webkit-scrollbar {
    width: 8px;
}

/* 单独设置滚动条轨道的背景 */
::-webkit-scrollbar-track {
    background: rgba(185, 181, 199, 0.1);
}

/* 单独设置可拖动滑块的样式，浏览器会自动根据内容长度计算滑块的实际高度 */
::-webkit-scrollbar-thumb {
    background: #A6ADB8;
    border-radius: 4px;
}

补充完上述规则后，浏览器就会正常渲染带可拖动滑块的滚动条，滑块高度会根据内容长度自适应调整，不会再出现整根竖条和右侧边框混淆的情况。

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