鼠标移入显示滚动条

/*滚动条 自定义样式 */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track-piece {
  background-color: transparent;
  -webkit-border-radius: 6px;
}
::-webkit-scrollbar-thumb {
  height: 5px;
  background-color: #ccc;
  -webkit-border-radius: 6px;
}
::-webkit-scrollbar-corner {
  background-color: transparent;
}


/*实现鼠标移入显示滚动条 样式*/
.chat-content {
  height: calc(100% - 221px);
  padding: 16px;
  box-sizing: border-box;
  overflow: auto;
}
.chat-content::-webkit-scrollbar-thumb {
  background-color: transparent;
}
.chat-content:hover::-webkit-scrollbar-thumb {
  background-color: #ccc;
}

通过默认状态下滚动条为透明颜色，鼠标移入区域时展示正常颜色实现效果。