0

我正在制作一个网页，其中 react-ace 编辑器占据页面宽度的 50% 和页面高度的 90%。在编辑器在编写一些代码时有一个垂直滚动条后，我想为显示的默认垂直滚动条设置样式。

我可以使用 -

const reactAceComponent = this.refs.reactAceComponent;
const editor = reactAceComponent.editor;

通过将 reactAceComponent ref 放在 Editor 上。

之后，我可以更改 Scroller 的高度和宽度等。但是如何设置 Scroller 本身的样式？

假设我想给滚动条一个类“style-scroller”并做这样的事情：

#style-scroller::-webkit-scrollbar-track
{
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    background-color: #F5F5F5;
    border-radius: 10px;
}

#style-scroller::-webkit-scrollbar
{
    width: 10px;
    background-color: #F5F5F5;
}

#style-scroller::-webkit-scrollbar-thumb
{
    background-color: #3366FF;
    border-radius: 10px;
    background-image: -webkit-linear-gradient(0deg,
                                              rgba(255, 255, 255, 0.5) 25%,
                                              transparent 25%,
                                              transparent 50%,
                                              rgba(255, 255, 255, 0.5) 50%,
                                              rgba(255, 255, 255, 0.5) 75%,
                                              transparent 75%,
                                              transparent)
}

是否可以为滚动条提供自定义样式？我什至从哪里开始？请帮我。

4

1 回答 1

2

您可以使用.ace_scrollbarclass 来定位 ace 中的滚动条，并使用.ace_scrollbar-v,.ace_scrollbar-h来定位垂直或水平滚动条（但:horizontal伪类也适用于此）。

在 cloud9 https://github.com/c9/core/blob/c4d1c59dc8d6619bdca3dbe740291cd5cd26352c/plugins/c9.ide.ace/scrollbar.js#L22中使用的一个更简单的替代方案是::-webkit-scrollbar 单独使用来定位所有滚动条

于 2019-04-30T23:33:24.727 回答