Show scroll bar on hover

Goal: When the content of the card-content box overflows, hide the scroll bar first. When the user moves the mouse into the box, the scroll bar is displayed. I only use the y-axis scroll bar here.

Effect:

 Code:

    .card-content {
      padding: 20px;
      height: calc(100% - 55px);
      overflow: hidden;
      &:hover {
        overflow-y: overlay;
      }
      &::-webkit-scrollbar {
        /*滚动条宽高*/
        width: 6px;
        height: 6px;
      }
      &::-webkit-scrollbar-thumb {
        /*滚动条里面小方块*/
        border-radius: 10px;
        transition: all 0.2s ease-in-out;
        background-color: transparent;
      }
      &:hover::-webkit-scrollbar-thumb {
        background-color: rgba(0, 0, 0, 0.2) !important;
      }
    }