如何设置Chrome滚动条样式，使其外观和行为表现与Firefox一致

Chrome 需要使用 ::-webkit-scrollbar 系列私有前缀属性定制滚动条样式，你可以在现有CSS的基础上补充以下规则，就能实现和Firefox默认滚动条一致的效果：

ul {
  overflow-y: auto;
  height: 50px;
  width: 150px;
  /* 以下为Firefox滚动条显式配置，和默认效果一致，可保留也可删除 */
  scrollbar-width: thin;
  scrollbar-color: #c1c1c1 transparent;
}

/* Chrome、Edge等webkit内核浏览器滚动条配置 */
ul::-webkit-scrollbar {
  width: 6px;
}
ul::-webkit-scrollbar-track {
  background: transparent;
}
ul::-webkit-scrollbar-thumb {
  background-color: #c1c1c1;
  border-radius: 3px;
}
/* 可选：匹配Firefox滚动条滑块hover效果 */
ul::-webkit-scrollbar-thumb:hover {
  background-color: #a1a1a1;
}

如果需要全局生效，将上述选择器中的ul替换为*即可，建议优先绑定到指定滚动容器，避免影响页面其他元素的滚动样式。

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