Css 带有自定义滚动条的DetailsList组件

下面是带有（固定标题）的

DetailsList

的基本实现

我试图实现的是将默认滚动条替换为自定义滚动条，并保持相同的功能/行为。 在实现自定义滚动条后，标题不粘，这是主要问题

工作示例

我尝试了以下库： ,

---

.

使用外部库处理滚动条的样式可能会将内容包装在div中，并导致

位置：sticky

停止工作

您最好的选择可能是尝试直接在

ScrollablePane

中设置滚动条的样式。比如：

const sbWidth=6；
常数sbHeight=6；
const sbBg=“粉红色”；
const sbthumbg=“红色”；

当然，您可以添加更多自定义项。 没有在Firefox上测试，但应该可以工作

密码箱：

设置滚动条的样式：

---

感谢您的建议和工作解决方案。这次我试图避免css定制。fluentui github上存在此功能的公开问题：

<ScrollablePane
  styles={{
    root: {
      selectors: {

        // Firefox
        ".ms-ScrollablePane--contentContainer": {
          scrollbarWidth: sbWidth,
          scrollbarColor: `${sbThumbBg} ${sbBg}`
        },

        // Chrome, Edge, etc
        ".ms-ScrollablePane--contentContainer::-webkit-scrollbar": {
          width: sbWidth,
          height: sbHeight
        },
        ".ms-ScrollablePane--contentContainer::-webkit-scrollbar-track": {
          background: sbBg
        },
        ".ms-ScrollablePane--contentContainer::-webkit-scrollbar-thumb": {
          background: sbThumbBg
        }
      }
    }
  }}
>