css修改滚动条

在一次做项目的时候，发现内容高出屏幕部分，多出滚动条，原生滚动条样式如何修改呢？

// 隐藏滚动条
.hideScrollBar{
    overflow: auto; /*隐藏滚动条必须项*/
}
.hideScrollBar::-webkit-scrollbar {
    width: 1px; // 如需显示滚动条将此单位设置为8px左右 颜色修改 并且把下面注释的两串代码取消注释即可
    background: #F0A1A8;
}

.hideScrollBar::-webkit-scrollbar-corner,
   /* 滚动条角落 */
.hideScrollBar::-webkit-scrollbar-thumb,
.hideScrollBar::-webkit-scrollbar-track {      /*滚动条的轨道*/
    border-radius: 4px;
}

//  .el-main::-webkit-scrollbar-corner,
//  .el-main::-webkit-scrollbar-track {
//    /* 滚动条轨道 */
//    background-color: rgba(180, 160, 120, 0.1);
//    box-shadow: inset 0 0 1px rgba(180, 160, 120, 0.5);
//  }

//  .el-main::-webkit-scrollbar-thumb {
//    /* 滚动条手柄 */
//    background-color: #00adb5;
//  }

希望能帮助到你们^_^