修改滚动条样式

如果给父元素固定了宽高，子元素设置overflow:auto时，就会出现滚动条，而浏览器默认的滚动条样式并不是很美观，如下图所示

为了让显示的滚动条更好看些，可以对滚动条样式进行设置，关键css代码如下：

    // 滚动条
    .box-card::-webkit-scrollbar {/*滚动条整体样式*/
        width: 10px;     /*高宽分别对应横竖滚动条的尺寸*/
        height: 1px;
    }
    .box-card::-webkit-scrollbar-thumb {/*滚动条里面小方块*/
        border-radius: 10px;
        -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
        background: #E5E5E5;
    }
    .box-card::-webkit-scrollbar-track {/*滚动条里面轨道*/
        -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
        border-radius: 10px;
        background: #ffffff;
    }

但如果要隐藏滚动条，也可以设置以下样式：

    /*不显示滚动条*/
    .box-card::-webkit-scrollbar {
        display: none;
    }

通过设置滚动样式后，显示的效果如下：

完整代码如下：