使用外部库处理滚动条的样式可能会将内容 Package 在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上测试，但应该工作。
代码无菌盒：https://codesandbox.io/s/fluet-ui-custom-scrollbars-ygm07?file=/src/index.tsx
设置滚动条样式：https://css-tricks.com/the-current-state-of-styling-scrollbars/

将此代码段添加到App.css，无需单独 * 调整 * 任何DetailsList。应用最适合您的宽度/颜色。

::-webkit-scrollbar {
  width: 8px;
  height: 8px;
  cursor: pointer;
}
::-webkit-scrollbar-button {
  background: #eee
}
::-webkit-scrollbar-track-piece {
  background: #eeecec
}
::-webkit-scrollbar-thumb {
  background: #dddcdc
}