Mostrar barra de desplazamiento al pasar el mouse

Objetivo: cuando el contenido del cuadro de contenido de la tarjeta se desborda, primero oculte la barra de desplazamiento. Cuando el usuario mueve el mouse dentro del cuadro, se muestra la barra de desplazamiento. Aquí solo uso la barra de desplazamiento del eje y.

Efecto:

 Código:

    .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;
      }
    }