css - 我怎样才能在我的 ag-grid 滚动条周围给出一个像 broder 的白框？

Question

我正在使用 Ag-grid 来响应 JavaScript。我得到了一个线框，它可以更改 Ag-grid 的默认滚动条。我的目标是为我的 UI 重现相同的内容。

我尝试使用 webkit 滚动条引入一些 css 更改。代码已被编写为样式组件。我的问题是，每次我尝试为滚动条提供一些宽度或高度时，滚动条的轨道和 slider 会占据整个宽度。下面提供了代码。

.ag-theme-fresh .ag-root{
        
        min-height: 200px;
        border: ${props => props.showBorder === true ? "1px solid #efefef" : "0px"};
    }
.ag-theme-fresh .ag-header{
    background-image: none;    
    font-family: "Frutiger";
    border-bottom: none;
    color:#646464;
    height:50px;
    min-height:50px;
}
.ag-theme-fresh .ag-header-row,.ag-theme-fresh .ag-pivot-off{
    height: 50px !important;
    min-height: 50px !important;
}


.ag-theme-fresh .ag-header-cell, .ag-theme-fresh .ag-ltr .ag-cell{
    border:none;
}
.ag-theme-fresh .ag-header-cell{
   
    padding-top: 15px;
    padding-bottom: 15px
    height: auto;
}
.ag-theme-fresh .ag-cell{
    line-height: 50px;
}
.ag-theme-fresh .ag-row-odd{
    background-color:white;
}

.ag-theme-fresh .ag-row-even{
    background-color:#eeeeee;
}
.ag-root ::-webkit-scrollbar {
    box-shadow: -5px 3px 6px 0 rgba(100, 100, 100, 0.16);
    background-color: #ffffff;
width:50 px;
height:900px;
   

}   

.ag-root :: -webkit-scrollbar-track {
    width:7px !important;
    box-shadow: inset 0 0 px grey; 
    border-radius: 10px;
    background:#ededed;
    height:856px;
}  

.ag-root :: -webkit-scrollbar-thumb {
    background: #cccccc;
    width:7px !important;
    height:785px; 
    border-radius: 10px;
}  

问题是我试图给滚动条属性一些宽度和高度来创建一个类似结构的框，但是滚动条占据了整个宽度。我该如何解决这个问题？

下面给出了描述我面临的问题的图像。第一张图片描述了线框，第二张图片描述了我得到的结果。

提前致谢。

Answer 1

我想完全删除栏，所以我这样做了(在 SCSS 中):

    .body-editor{
     height: fit-content ;
     margin-top:-5px;
     overflow: auto;
     **&::-webkit-scrollbar{width: 0px !important;}**
}

尝试使用::-webkit-scrollbar{} ？