JumboScrollbar

JumboScrollbar wraps a scrollable region with a styled custom scrollbar that matches the active MUI theme. It is used inside the sidebar and any content area that requires consistent cross-browser scroll styling.

Import

typescript

import { JumboScrollbar } from '@jumbo/components';

Props

Prop	Type	Required	Description
`children`	`ReactNode`	Yes	Scrollable content
`style`	`CSSProperties`	No	Inline styles applied to the scroll container
`className`	`string`	No	CSS class applied to the scroll container
`autoHide`	`boolean`	No	Hide scrollbar when not scrolling (default `true`)
`autoHideDuration`	`number`	No	Ms before scrollbar hides after scroll stops (default `200`)
`autoHideTimeout`	`number`	No	Ms before scrollbar hides when the mouse leaves (default `1000`)

Usage

Sidebar scrollable content

tsx

// src/layouts/StretchedLayout/Sidebar/SidebarContent.tsx
import { JumboScrollbar } from '@jumbo/components';
 
export function SidebarContent({ children }: { children: ReactNode }) {
  return (
    <JumboScrollbar
      style={{ height: '100%' }}
      autoHide
      autoHideDuration={200}
    >
      {children}
    </JumboScrollbar>
  );
}

Fixed-height scrollable panel

tsx

<JumboScrollbar style={{ height: 400 }}>
  <NotificationList items={notifications} />
</JumboScrollbar>

Height requirement

JumboScrollbar requires either a fixed height in its style prop or a parent container with a defined height. Without a bounded height it will expand to fit all content and no scrolling will occur.

Styling

The scrollbar track and thumb inherit colors from the active MUI theme. To override, pass className and target the scrollbar pseudo-elements in your CSS:

css

/* src/styles/scrollbar.css */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
 
::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.2);
  border-radius: 3px;
}

The global src/styles/scrollbar.css already applies these defaults; JumboScrollbar scopes them to the component boundary.