我们可以设计溢出滚动的样式吗？

Question

我在我的React Web应用程序中使用overflow:auto。 但滚动 ID 很宽。我可以减少div组件滚动的宽度吗？ 下面是代码片段 -

<div style={{display:"flex", overflow:"auto"}}>
{....}
</div>

Answer 1

如果您想通过内联样式专门控制React组件中滚动条的宽度，您可以使用Firefox的scrollbarWidth属性以及IE和Edge的MsOverflowStyle。

import React from 'react';

const MyComponent = () => {
  const containerStyle = {
    display: 'flex',
    overflow: 'auto',
    scrollbarWidth: 'thin',  // For Firefox
    MsOverflowStyle: 'none',  // For IE and Edge
  };

  return (
    <div style={containerStyle}>
      {/* Your content goes here */}
    </div>
  );
};

export default MyComponent;

在此示例中：

scrollbarWidth: 'thin' 用于 Firefox 设置细滚动条。 MsOverflowStyle: 'none' 用于 IE 和 Edge 隐藏默认滚动条。 请记住，并非所有浏览器都支持scrollbarWidth，因此此解决方案可能不适用于所有地方。另请注意，由于浏览器安全性和一致性问题，样式滚动条通常受到限制。如果对滚动条外观的精确控制至关重要，您可能需要考虑使用自定义滚动条库或提供此级别自定义的第三方组件。

React 中自定义滚动条库的建议

我正在寻找为滚动条提供高级自定义选项的 React 库的建议。以下是我发现的一些选项：

1. 反应自定义滚动条

   • npm：反应自定义滚动条
   • 描述：该库允许您完全自定义 React 应用程序中滚动条的外观和行为。

2. 反应滚动条

   • npm：反应滚动条
   • 描述：React-scrollbar 是一个简单、轻量级的滚动条组件，可以自定义以适合您的设计。

3. 反应完美滚动条

   • npm：react-perfect-scrollbar
   • 描述：该库为 React 提供了一个完美的滚动条组件，具有多种自定义选项。

4. simplebar-react

   • npm：simplebar-react
   • 描述：SimpleBar 是一个简单且轻量级的自定义滚动条库。它不是特定于 React 的，但有一个可用的 React 包装器。

5. 反应滚动条自定义

   • npm：react-scrollbars-custom
   • 描述：该库为React提供了一个高度可定制的滚动条组件。

在选择库之前，请务必检查其文档和功能，看看它们是否满足您的特定要求。每个库可能有自己的一组功能、API 和自定义选项。