Question

当您在滚动条上移动鼠标时，react-custom-scrollbars的默认光标为指针。

有没有办法改变光标样式？

现在这些都不起作用。

<Scrollbars style={{ cursor: 'default' }}>
  <p>Some content</p>
</Scrollbars>

和

<Scrollbars className="my-style">
  <p>Some content</p>
</Scrollbars>

.my-style {
  cursor: default;
}

Answer 1

您只需使用CSS即可，并加载图像base64或file.jpg png gif ...等。

测试后根本不起作用：

.cursor1 {
  cursor: url(data:image/png;base64,iVBORw0KGgoAASUhEUgAAACAAAAAgCAYAAABzenr0AAAJFklEQVR42rWXCXBU9R3Hv+/V...), auto;
}

如果您希望标准游标仍在运行测试：

.cursors {
  text-align:center;
}
.cursors-main {
  display:inline-block;
  font-size:12px;
  font-family:Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
  background:green;
  color:#FFF;
  padding:10px 25px;
  margin-bottom:5px;
}
.cursors-main:hover {
  background:#555;
}
.auto            { cursor: auto; }
.deafult         { cursor: default; }
.none            { cursor: none; }
.context-menu    { cursor: context-menu; }
.help            { cursor: help; }
.pointer         { cursor: pointer; }
.progress        { cursor: progress; }
.wait            { cursor: wait; }
.cell            { cursor: cell; }
.crosshair       { cursor: crosshair; }
.text            { cursor: text; }
.vertical-text   { cursor: vertical-text; }
.alias           { cursor: alias; }
.copy            { cursor: copy; }
.move            { cursor: move; }
.no-drop         { cursor: no-drop; }
.not-allowed     { cursor: not-allowed; }
.all-scroll      { cursor: all-scroll; }
.col-resize      { cursor: col-resize; }
.row-resize      { cursor: row-resize; }
.n-resize        { cursor: n-resize; }
.e-resize        { cursor: e-resize; }
.s-resize        { cursor: s-resize; }
.w-resize        { cursor: w-resize; }
.ns-resize       { cursor: ns-resize; }
.ew-resize       { cursor: ew-resize; }
.ne-resize       { cursor: ne-resize; }
.nw-resize       { cursor: nw-resize; }
.se-resize       { cursor: se-resize; }
.sw-resize       { cursor: sw-resize; }
.nesw-resize     { cursor: nesw-resize; }
.nwse-resize     { cursor: nwse-resize; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.0.0/cjs/react.development.js"></script>
<section class="cursors">
    <article class="cursors-main auto">auto</article>
    <article class="cursors-main default">default</article>
    <article class="cursors-main none">none</article>
    <article class="cursors-main context-menu">context-menu</article>
    <article class="cursors-main help">help</article>
    <article class="cursors-main pointer">pointer</article>
    <article class="cursors-main progress">progress</article>
    <article class="cursors-main wait">wait</article>
    <article class="cursors-main cell">cell</article>
    <article class="cursors-main crosshair">crosshair</article>
    <article class="cursors-main text">text</article>
    <article class="cursors-main vertical-text">vertical-text</article>
    <article class="cursors-main alias">alias</article>
    <article class="cursors-main copy">copy</article>
    <article class="cursors-main move">move</article>
    <article class="cursors-main no-drop">no-drop</article>
    <article class="cursors-main not-allowed">not-allowed</article>
    <article class="cursors-main all-scroll">all-scroll</article>
    <article class="cursors-main col-resize">col-resize</article>
    <article class="cursors-main row-resize">row-resize</article>
    <article class="cursors-main n-resize">n-resize</article>
    <article class="cursors-main s-resize">s-resize</article>
    <article class="cursors-main e-resize">e-resize</article>
    <article class="cursors-main w-resize">w-resize</article>
    <article class="cursors-main ns-resize">ns-resize</article>
    <article class="cursors-main ew-resize">ew-resize</article>
    <article class="cursors-main ne-resize">ne-resize</article>
    <article class="cursors-main nw-resize">nw-resize</article>
    <article class="cursors-main se-resize">se-resize</article>
    <article class="cursors-main sw-resize">sw-resize</article>
    <article class="cursors-main nesw-resize">nesw-resize</article>
    <article class="cursors-main nwse-resize">nwse-resize</div>
</section>

Answer 2

奇怪！如何使用像.cursor-normaliizer之类的父母。像这样：

<Scrollbars className="cursor-normalizer">
     <p>Some content</p>
</Scrollbars>

的CSS：

.cursor-normalizer div:last-child > div{ // exact selector
      cursor: default !important
}

DEMO

Answer 3

根据文档（https://github.com/malte-wessel/react-custom-scrollbars/blob/master/docs/customization.md）

<Scrollbars
        renderTrackHorizontal={props => <div {...props} className="track-horizontal"/>}
        renderTrackVertical={props => <div {...props} className="track-vertical"/>}
        renderThumbHorizontal={props => <div {...props} className="thumb-horizontal"/>}
        renderThumbVertical={props => <div {...props} className="thumb-vertical"/>}
        renderView={props => <div {...props} className="view"/>}>
        <div>
            content here
        </div>
</Scrollbars>

然后应用波纹管CSS，使底座正常工作。并根据需要进行调整。

（在SCSS中）

.track-vertical {
                        top: 2px;
                        bottom: 2px;
                        right: 2px;
                        border-radius: 3px;
                        background: rgba(255, 255, 255, 0.111);

                        .thumb-vertical {
                            position: relative;
                            display: block;
                            width: 100%;
                            cursor: pointer;
                            border-radius: inherit;
                            background-color: rgba(123, 154, 255, 0.418); // changed the color
                        }

                    }

                    .track-horizontal {
                        position: absolute;
                        height: 6px;
                        right: 2px;
                        bottom: 2px;
                        left: 2px;
                        border-radius: 3px;

                        .thumb-horizontal {
                            position: relative;
                            display: block;
                            height: 100%;
                            cursor: pointer;
                            border-radius: inherit;
                            background-color: rgba(125, 149, 255, 0.993); // changed the color
                        }
                    }

                    .view {
                        position: absolute;
                        top: 0px;
                        left: 0px;
                        right: 0px;
                        bottom: 0px;
                        overflow: scroll;
                        margin-right: -15px;
                        margin-bottom: -17px !important; // changed from -15px  (default) to -17px (native scrollbar had a portion visible) 
                    }

这是我们不手动渲染元素时默认应用的样式。传递的道具将处理更新拇指的尺寸。

我不知道这是否是故意的。因此，我们可以自定义所需的方式，而不必在CSS中使用！important（看起来就是这样！）。

对于 .view 元素。样式已通过，如果您想覆盖（如我所需要的（边距：-17px，而不是-15px）），则仅使用CSS规则即可。使用！重要。或使用内联CSS。

上面是SCSS。下面是编译后的CSS：

（在CSS中）

.track-vertical {
  top: 2px;
  bottom: 2px;
  right: 2px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.111);
}
.track-vertical .thumb-vertical {
  position: relative;
  display: block;
  width: 100%;
  cursor: pointer;
  border-radius: inherit;
  background-color: rgba(123, 154, 255, 0.418);
}

.track-horizontal {
  position: absolute;
  height: 6px;
  right: 2px;
  bottom: 2px;
  left: 2px;
  border-radius: 3px;
}
.track-horizontal .thumb-horizontal {
  position: relative;
  display: block;
  height: 100%;
  cursor: pointer;
  border-radius: inherit;
  background-color: rgba(125, 149, 255, 0.993);
}

.view {
  position: absolute;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  overflow: scroll;
  margin-right: -15px;
  margin-bottom: -17px !important;
}

如何更改react-custom-scrollbars的光标样式？

3 个答案:

上面是SCSS。下面是编译后的CSS：