react-scrollbars-custom怎么设置滚动条是悬浮的不占空间

`react-scrollbars-custom`是一个用于自定义React滚动条的库，它允许你控制滚动条的样式，包括使其悬浮不占用空间。要在`react-scrollbars-custom`中实现悬浮滚动条，你需要在CSS上做一些定制。

首先，安装库：

npm install react-scrollbars-custom

然后，在组件中导入并使用：

import Scrollbar from 'react-scrollbars-custom';

function MyComponent() {
  return (
    <Scrollbar style={{ scrollbarSize: 'auto', scrollbarTrackHeight: '0px' }}>
      {/* Your content here */}
    </Scrollbar>
  );
}

这里的关键在于设置`scrollbarTrackHeight`属性为`'0px'`，这样可以让滚动条的轨道高度变为0，看起来像是悬空的。`scrollbarSize`通常不需要更改，因为库会自动计算合适的大小。

如果你还想进一步定制滚动条的颜色、圆角等样式，可以在CSS文件中添加规则，比如：

.react-scrollbars-custom__track {
  background-color: rgba(0, 0, 0, 0.1); /* 悬浮颜色 */
  border-radius: 5px; /* 圆角 */
}

.react-scrollbars-custom__thumb {
  background-color: #4CAF50; /* 滚动块颜色 */
}

记住，滚动条是否浮动可能会受到浏览器默认样式的影响，确保覆盖了所有必要的样式。