## ScrollArea Use the ScrollArea component to customize scrollbars. Category: Miscellaneous ### Introduction The ScrollArea component supports the following props: - `type` defines scrollbars behavior: - `hover` - scrollbars are visible on hover - `scroll` - scrollbars are visible on scroll - `auto` - similar to `overflow: auto` - scrollbars are always visible when the content is overflowing - `always` - same as auto but scrollbars are always visible regardless of whether the content is overflowing - `never` - scrollbars are always hidden - `offsetScrollbars` - offset scrollbars with padding - x – adds padding to offset horizontal scrollbar only - y – adds padding to offset vertical scrollbar only - xy – adds padding to offset both scrollbars - present – adds padding only when scrollbars are visible - `scrollbarSize` - scrollbar size, controls scrollbar and thumb width/height - `scrollHideDelay` - delay in ms to hide scrollbars, applicable only when type is hover or scroll - `overscrollBehavior` – controls overscroll-behavior of the viewport - `scrollTo` sets scroll position of the viewport This example has a vertical scroll bar. This is how the ScrollArea height and width is defined in the example above ```python html.Div( [ dmc.Title("Charizard (Pokémon)", order=3), dmc.ScrollArea( h=250, w=350, children = dmc.Paper(dmc.Text(text), withBorder=True), ) ] ) ``` ### Horizontal scrollbars The horizontal scroll bar will be displayed when the content of the ScrollArea is wider than the ScrollArea. ```python import dash_mantine_components as dmc from docs.scrollarea.text import text component = dmc.Center( dmc.ScrollArea( h=250, w=350, children=dmc.Paper( [dmc.Title("Charizard (Pokémon)", order=3), dmc.Text(text)], w=600 ), ), ) ``` ### Disable horizontal scrollbars To disable horizontal scrollbars set `scrollbars="y"` prop: ```python import dash_mantine_components as dmc from docs.scrollarea.text import text component = dmc.Center( dmc.ScrollArea( h=250, w=350, scrollbars="y", children=dmc.Paper( [dmc.Title("Charizard (Pokémon)", order=3), dmc.Text(text)], w=600 ), ), ) ``` ### Scroll To The `scrollTo` prop sets the scroll position of the viewport with the following options: * `top` – The vertical position as pixels (number) or percentage (string) from '0%' to '100%' * `left` – The horizontal position as pixels (number) or percentage (string) from '0%' to '100%' * `behavior` – scroll behavior: `auto` (instant) or `smooth` (animated), `smooth` by default For example: ```python # Scroll to specific pixel positions dmc.ScrollArea(scrollTo={"top": 100, "left": 50}) # Scroll to percentage positions dmc.ScrollArea(scrollTo={"top": "25%", "left": "75%"}) # Mixed usage dmc.ScrollArea(scrollTo={"top": 200, "left": "50%", "behavior": "auto"}) ``` --- ```python import dash_mantine_components as dmc from dash import callback, Input, Output, ctx content = [ dmc.Box([ dmc.Title(f"Section {i}", order=4, mt="sm", id=f"section-{i}"), dmc.Text(""" Lorem ipsum, dolor sit amet consectetur adipisicing elit. Dicta perspiciatis reiciendis voluptate eaque itaque quos. Natus iure tenetur libero, reprehenderit ad, sequi, in aliquam eos necessitatibus expedita delectus veniam culpa! """) ]) for i in range(1, 11) ] component = dmc.Box([ dmc.ScrollArea( content, id="scrollArea", h=250, w=350, ), dmc.Group([ dmc.Button("Scroll to Top", id="scrollto-top"), dmc.Button("Scroll to Middle", id="scrollto-middle"), dmc.Button("Scroll to Bottom", id="scrollto-bottom"), ], mt="lg"), ]) @callback( Output("scrollArea", "scrollTo"), Input("scrollto-top", "n_clicks"), Input("scrollto-middle", "n_clicks"), Input("scrollto-bottom", "n_clicks"), ) def scroll_to(t, m, b): if ctx.triggered_id == "scrollto-middle": return {"top": "50%"} if ctx.triggered_id == "scrollto-bottom": return {"top": "100%"} return {"top": 0} ``` ### ScrollAreaAutosize `ScrollAreaAutosize` component allows to create scrollable containers when given max-height is reached. ```python import dash_mantine_components as dmc from dash import callback, Output, Input, ctx lorem = ( "Lorem ipsum, dolor sit amet consectetur adipisicing elit. " "Dicta perspiciatis reiciendis voluptate eaque itaque quos. " "Natus iure tenetur libero, reprehenderit ad, sequi, in aliquam eos " "necessitatibus expedita delectus veniam culpa!" ) component = dmc.Stack( [ dmc.ScrollAreaAutosize(mah=300, maw=400, p="sm", id="scrollarea-autosize"), dmc.Group( m="lg", children=[ dmc.Button( "1 paragraph", id="btn-1-paragraph", color="red", ), dmc.Button( "4 paragraphs", id="btn-4-paragraphs", ), ], ), ] ) @callback( Output("scrollarea-autosize", "children"), Input("btn-1-paragraph", "n_clicks"), Input("btn-4-paragraphs", "n_clicks"), ) def update_paragraphs(inc, dec): if ctx.triggered_id == "btn-1-paragraph": return dmc.Box(lorem, p="sm") return [dmc.Box(lorem, p="sm") for _ in range(4)] ``` ### Styles API This component supports Styles API. With Styles API, you can customize styles of any inner element. See the Styling and Theming sections of these docs for more information. #### ScrollArea Selectors | Selector | Static selector | Description | | --------- | ------------------------------- | ------------------------------------------------- | | root | `.mantine-ScrollArea-root` | Root element | | content | `.mantine-ScrollArea-content` | Wraps component children | | viewport | `.mantine-ScrollArea-viewport` | Main scrollable area | | scrollbar | `.mantine-ScrollArea-scrollbar` | Horizontal or vertical scrollbar root | | thumb | `.mantine-ScrollArea-thumb` | Scrollbar thumb | | corner | `.mantine-ScrollArea-corner` | Corner between horizontal and vertical scrollbars | #### ScrollArea CSS variables | Selector | Variable | Description | |----------|------------------------------|----------------| | root | `--scrollarea-scrollbar-size` | Scrollbar size | #### ScrollArea data attributes | Selector | Attribute | Condition | Value | |------------------|--------------------|------------------------------------|-------------------------------------| | scrollbar, corner| `data-hidden` | `type="never"` | – | | corner | `data-hovered` | One of the scrollbars is hovered | – | | scrollbar | `data-orientation` | – | "horizontal" or "vertical" depending on scrollbar position | ### Keyword Arguments #### ScrollArea - children (a list of or a singular dash component, string or number; optional): Content. - id (string; optional): Unique ID to identify this component in Dash callbacks. - aria-* (string; optional): Wild card aria attributes. - attributes (boolean | number | string | dict | list; optional): Passes attributes to inner elements of a component. See Styles API docs. - className (string; optional): Class added to the root element, if applicable. - classNames (dict; optional): Adds custom CSS class names to inner elements of a component. See Styles API docs. - darkHidden (boolean; optional): Determines whether component should be hidden in dark color scheme with `display: none`. - data-* (string; optional): Wild card data attributes. - hiddenFrom (string; optional): Breakpoint above which the component is hidden with `display: none`. - lightHidden (boolean; optional): Determines whether component should be hidden in light color scheme with `display: none`. - loading_state (dict; optional): Object that holds the loading state object coming from dash-renderer. For use with dash<3. `loading_state` is a dict with keys: - mod (string | dict | list of string | dicts; optional): Element modifiers transformed into `data-` attributes. For example: "xl" or {"data-size": "xl"}. Can also be a list of strings or dicts for multiple modifiers. Falsy values are removed. - offsetScrollbars (boolean; optional): Determines whether scrollbars should be offset with padding on given axis, `False` by default. - overscrollBehavior (optional): Defines `overscroll-behavior` of the viewport. https://developer.mozilla.org/en-US/docs/Web/CSS/overscroll-behavior. - scrollHideDelay (number; optional): Scroll hide delay in ms, applicable only when type is set to `hover` or `scroll`, `1000` by default. - scrollTo (dict; optional): Scroll to a position in the scroll area. `scrollTo` is a dict with keys: - scrollbarSize (string | number; optional): Scrollbar size, any valid CSS value for width/height, numbers are converted to rem, default value is 0.75rem. - scrollbars (boolean; optional): Axis at which scrollbars must be rendered, `'xy'` by default. - styles (boolean | number | string | dict | list; optional): Adds inline styles directly to inner elements of a component. See Styles API docs. - tabIndex (number; optional): tab-index. - type (a value equal to: 'auto', 'always', 'scroll', 'hover', 'never'; optional): Defines scrollbars behavior, `hover` by default - `hover` – scrollbars are visible when mouse is over the scroll area - `scroll` – scrollbars are visible when the scroll area is scrolled - variant (string; optional): variant. - visibleFrom (string; optional): Breakpoint below which the component is hidden with `display: none`.