Question

如果在控制台中看到的话，存在以下类：

html.sap-desktop ::-webkit-scrollbar {
    width: 16px;
    height: 16px;
    background-color: #f7f7f7;
}

html.sap-desktop ::-webkit-scrollbar-corner {
    background-color: #f7f7f7;
}

html.sap-desktop ::-webkit-scrollbar-thumb {
    background-color: #e6e6e6;
}

我想给蓝色滚动条和改变宽度。这就是我所做的。请告诉您一个好主意，如果不能，可以使用其他什么方法。

.sapUiBody .sapMPageEnableScrolling::-webkit-scrollbar {
    width: 6px;

}

.sapUiBody .sapMPageEnableScrolling::-webkit-scrollbar-track {
    background-color: #ffffff;
    border-radius: 5px;
 }

.sapUiBody .sapMPageEnableScrolling::-webkit-scrollbar-thumb {

    background-color: #005daa;
    height: 3px !important;

}

One more issue I am facing is, when I hover over my scrollbar, it becomes grey.

Answer 1

在样式表中添加以下CSS并更新颜色

.sap-desktop ::-webkit-scrollbar {
    width: 16px !important;
}
.sap-desktop ::-webkit-scrollbar-thumb {
    background-color: #005483 !important;/* Update color */
}
.sap-desktop ::-webkit-scrollbar-thumb:hover { /* Scrollbar hover */
    background-color: #d14900 !important; /* Update hover color */
}

Answer 2

首先解决这个问题，直接修改css类不是一个好主意。这将更改应用程序中say卷动条的所有实例...将css类赋予父类，然后修改css 例如

.parentCssClass .sap-desktop ::-webkit-scrollbar {
    width: 16px !important;
}

在UI5中覆盖webkit-scrollbar

2 个答案: