@mantine/core/lib/components/ScrollArea/ScrollArea.d.ts

React components library focused on usability, accessibility and developer experience

import { BoxProps, ElementProps, Factory, StylesApiProps } from '../../core';
export type ScrollAreaStylesNames = 'root' | 'viewport' | 'scrollbar' | 'thumb' | 'corner' | 'content';
export type ScrollAreaCssVariables = {
    root: '--scrollarea-scrollbar-size';
};
export interface ScrollAreaProps extends BoxProps, StylesApiProps<ScrollAreaFactory>, ElementProps<'div'> {
    /** Scrollbar size, any valid CSS value for width/height, numbers are converted to rem, default value is 12px (0.75rem) */
    scrollbarSize?: number | string;
    /**
     * Defines scrollbars behavior
     * - `'hover'` – scrollbars visible on hover (default)
     * - `'scroll'` – scrollbars visible during scrolling
     * - `'auto'` – scrollbars visible only when content overflows (like CSS overflow: auto)
     * - `'always'` – scrollbars always visible, even when content doesn't overflow
     * - `'never'` – scrollbars always hidden
     * @default 'hover'
     * */
    type?: 'auto' | 'always' | 'scroll' | 'hover' | 'never';
    /** Scroll hide delay in ms, applicable only when type is set to `hover` or `scroll` @default 1000 */
    scrollHideDelay?: number;
    /**
     * Axis at which scrollbars must be rendered
     * - `'x'` - horizontal scrollbar only
     * - `'y'` - vertical scrollbar only
     * - `'xy'` - both scrollbars
     * - `false` - no scrollbars rendered (content remains scrollable via mouse/touch)
     * @default 'xy'
     */
    scrollbars?: 'x' | 'y' | 'xy' | false;
    /**
     * Determines whether scrollbars should be offset with padding on given axis
     * - `true` - adds padding to offset both scrollbars (always)
     * - `'x'` - adds padding to offset horizontal scrollbar (always)
     * - `'y'` - adds padding to offset vertical scrollbar (always)
     * - `'present'` - adds padding only when scrollbars are visible (dynamic)
     * @default false
     */
    offsetScrollbars?: boolean | 'x' | 'y' | 'present';
    /** Assigns viewport element (scrollable container) ref */
    viewportRef?: React.Ref<HTMLDivElement>;
    /** Props passed down to the viewport element */
    viewportProps?: React.ComponentProps<'div'>;
    /** Called with current position (`x` and `y` coordinates) when viewport is scrolled */
    onScrollPositionChange?: (position: {
        x: number;
        y: number;
    }) => void;
    /**
     * Called when scrollarea is scrolled to the bottom (within 0.8px tolerance for sub-pixel rendering)
     */
    onBottomReached?: () => void;
    /** Called when scrollarea is scrolled all the way to the top */
    onTopReached?: () => void;
    /** Called when scrollarea is scrolled to the left (within 0.8px tolerance for sub-pixel rendering) */
    onLeftReached?: () => void;
    /** Called when scrollarea is scrolled to the right (within 0.8px tolerance for sub-pixel rendering) */
    onRightReached?: () => void;
    /** Defines `overscroll-behavior` of the viewport */
    overscrollBehavior?: React.CSSProperties['overscrollBehavior'];
    /** Initial scroll position set on mount */
    startScrollPosition?: {
        x?: number;
        y?: number;
    };
}
export interface ScrollAreaAutosizeProps extends ScrollAreaProps {
    /** Called when content overflows due to max-height, making the container scrollable */
    onOverflowChange?: (overflowing: boolean) => void;
}
export type ScrollAreaFactory = Factory<{
    props: ScrollAreaProps;
    ref: HTMLDivElement;
    stylesNames: ScrollAreaStylesNames;
    vars: ScrollAreaCssVariables;
    staticComponents: {
        Autosize: typeof ScrollAreaAutosize;
    };
}>;
export type ScrollAreaAutosizeFactory = Factory<{
    props: ScrollAreaAutosizeProps;
    ref: HTMLDivElement;
    stylesNames: ScrollAreaStylesNames;
    vars: ScrollAreaCssVariables;
}>;
export declare const ScrollArea: import("../..").MantineComponent<{
    props: ScrollAreaProps;
    ref: HTMLDivElement;
    stylesNames: ScrollAreaStylesNames;
    vars: ScrollAreaCssVariables;
    staticComponents: {
        Autosize: typeof ScrollAreaAutosize;
    };
}>;
export declare const ScrollAreaAutosize: import("../..").MantineComponent<{
    props: ScrollAreaAutosizeProps;
    ref: HTMLDivElement;
    stylesNames: ScrollAreaStylesNames;
    vars: ScrollAreaCssVariables;
}>;