如何在我的 ag-grid 滚动条周围放置一个像 broder 这样的白框？答案

【问题标题】：How can i give a white box like broder around my ag-grid scrollbar?如何在我的 ag-grid 滚动条周围放置一个像 broder 这样的白框？
【发布时间】：2020-02-24 15:10:07
【问题描述】：

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

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

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

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

描述我面临的问题的图像如下所示。第一张图描绘了线框，第二张图描绘了我得到的结果。

提前致谢。

【问题讨论】：

你能提供一个有效的sn-p吗
这会有点困难，因为代码太大了。但是，您可以将我的 sn-p 复制粘贴到 .scss 文件中并将其导入到 ag-grid 文件中。这应该会给您一个工作示例。

标签： css reactjs scrollbar ag-grid

【解决方案1】：

我想完全删除该栏，所以我这样做了（在 SCSS 中）：

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

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

【讨论】：

请检查我提供的代码，以便更好地了解我的情况。