自定义滚动条行为异常？Chrome下div滚动条宽度不生效问题

你遇到的问题是全局滚动条样式里的宽度仅在页面滚动条生效，div滚动条只生效颜色，可按以下步骤修复：

• 确保div开启滚动功能：给目标div添加overflow: auto;（或overflow-y: auto;仅启用纵向滚动）。只有当元素内容超出容器范围时，浏览器才会渲染滚动条，对应的样式才能作用其上。
• 避免样式被覆盖：检查是否有更具体的CSS选择器（如.custom-div ::-webkit-scrollbar）覆盖了全局的宽度设置。可以针对目标div单独声明滚动条样式，提升优先级：

/* 全局滚动条基础样式 */
::-webkit-scrollbar {
  width: 5px;
}
::-webkit-scrollbar-track {
  background: #ff0000;
}

/* 针对特定div的滚动条样式，确保宽度生效 */
.your-target-div::-webkit-scrollbar {
  width: 5px;
}

原理：若div未设置overflow属性，浏览器不会为其生成滚动条，自然无法应用滚动条宽度样式；而单独为div设置滚动条样式，可避免全局样式被其他规则覆盖。

内容的提问来源于stack exchange，提问作者k.m.