DetailsList Component with custom scrollbar

Question

At the following link is the basic implementation of DetailsList with Sticky (fixed header).

What I'm trying to achieve is to replace default scrollbar with custom scrollbar and to keep the same functionality/behavior. After implementation of custom scrollbar header is not sticky and that's the main problem.

Working example CodeSandbox.

I tried the following libraries: ReactCustomScrollbars, OverlayScrollbars.

score 1 · Answer 1 · answered Nov 13 '20 at 15:48

Using an external library to handle the styling of the scrollbars probably wraps your content in a div and causes position: sticky to stop working.

Probably your best bet is to try to style the scrollbars in the ScrollablePane directly. Something like:

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

You can of course add more customizations. Didn't test on Firefox but should work.

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

Styling scrollbars: https://css-tricks.com/the-current-state-of-styling-scrollbars/

Thank you for suggestion and working solution. I'm trying to avoid `css customization` this time. There is open issue at fluentui github for this as a feature: https://github.com/microsoft/fluentui/issues/8302 — Marko Savic, Nov 20 '20 at 12:36

score 0 · Answer 2 · answered Feb 23 '23 at 21:36

Add this snippet to App.css and no need to adjust any DetailsList individually. Apply the width/color that works best for you.

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

DetailsList Component with custom scrollbar

2 Answers2