CODEWITHSUNDEEP
cssoffice-ui-fabricfluentui-react
Marko Savic
Marko Savic

Reputation: 2384

DetailsList Component with custom scrollbar

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.

Upvotes: 0

Views: 3791

Answers (2)

Debraj Banerjee
Debraj Banerjee

Reputation: 321

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
}

Upvotes: 0

victmo
victmo

Reputation: 1216

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/

Styled scrollbars

Upvotes: 1

Related Questions