overflow hide the scroll bar style

overflow hide the scroll bar style

When using the overflow, property value auto or scroll, when there will be a lot of extra scroll bar on the side, then the impact is very unsightly, so we sometimes need to hide the scroll bar.
Today said two kinds of scroll bar is hidden way I used, if there are other solutions welcome message added:

method one:

.detailDialog /deep/ .el-dialog__body{
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 0 0.1rem;
    margin-bottom: -.2rem;
}

.detailDialog /deep/ .el-dialog__body::-webkit-scrollbar{
    display: none;
} 

This method applies only to googlethe browser, while Firefox is not applicable because the scroll bar in Firefox is not customizable, so I use the re-set in the box and add a layer outside the box overflow:hidden, so that the internal Some outside the box bigger than the box, so you can hide the scroll bar, that there is no compatibility issues, can be used in each browser, hiding a covert method:

Method Two:

HTML code

 <div class="dialogBox"> //外层套一层 Box
    <el-dialog class="detailDialog" :visible.sync="detailDialogVisible" title="弹窗">
        <div class="inBox" v-html="goodsDetail"/>
    </el-dialog>
 </div>

css code

    .detailDialog /deep/ .el-dialog {
        // width: 100%;
        overflow: hidden;
    }
    .dialogBox /deep/ .el-dialog__wrapper {
        overflow: hidden !important;
    }
    .detailDialog /deep/ .el-dialog__body{
        width: 102%;
        padding-top: 0 !important;
        overflow-y: auto !important;
        height: 1040px;
   }