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

Question

以下链接是DetailsListwith Sticky (fixed header)的基本实现。

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

工作示例CodeSandbox。

我尝试了以下库： ReactCustomScrollbars， OverlayScrollbars。

Answer 1

使用外部库来处理滚动条的样式可能会将您的内容包装在 div 中并导致position: sticky停止工作。

可能您最好的选择是尝试ScrollablePane直接设置滚动条的样式。就像是：

const sbWidth = 6;
const sbHeight = 6;
const sbBg = "pink";
const sbThumbBg = "red";

<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
        }
      }
    }
  }}
>

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

CodeSanbox：https ://codesandbox.io/s/fluet-ui-custom-scrollbars-ygm07?file=/src/index.tsx

样式滚动条：https ://css-tricks.com/the-current-state-of-styling-scrollbars/