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

IT技术 html css reactjs
2021-05-03 05:12:10

当您在滚动条上移动鼠标时，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;
}
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) 
                    }

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

不知道是不是故意的 所以我们可以自定义我们想要的方式，而且我们不必在我们的 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;
}

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

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

css：

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

演示

嗨，只需使用 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>

其它你可能感兴趣的问题
上一篇烤箱/食品安全灯丝？ 下一篇如何为react库创建示例