Skip to content
Home

ScrollView

Info
Demos
Properties

Import

import { ScrollView } from '@dnb/eufemia'

The previous fragment import remains available for backwards compatibility, but is deprecated and will be removed in v13:

// Deprecated
import { ScrollView } from '@dnb/eufemia/fragments'

Description

ScrollView creates a general-purpose horizontal or vertical scrolling area. It renders a div, supports native div attributes and spacing properties, and integrates with Eufemia components that need to identify their nearest scrolling container.

Use it when content must scroll independently from the page, for example when a region has a constrained width or height. Set the constraint through style, className, or a surrounding layout.

For component-specific behavior, prefer the specialized variants:

Dialog and Drawer already use ScrollView internally, so they normally do not need another one around their content.

<ScrollView>scrollable content</ScrollView>

Accessibility

A scrollable region must be reachable by keyboard when it contains no other focusable elements. Use interactive="auto" to add it to the tab order only while it overflows. Use interactive={true} when it must always be keyboard-focusable.

When the region needs an accessible name, provide aria-label or aria-labelledby. Avoid unnecessary nested scrolling areas because they can make keyboard and touch navigation difficult.

Scrollbar gutter

Use scrollbarGutter="stable" to reserve space for the scrollbar, preventing horizontal layout shifts when content dynamically changes between overflowing and non-overflowing states.

This maps to scrollbar-gutter: stable. It has no visible effect on systems using overlay scrollbars, such as the default configuration on macOS and iOS. Dialog and Drawer enable it automatically by default.

Relevant links

Related components

ScrollView is part of the Other category. Other components for similar needs:

  • CopyOnClick — when people should copy text by clicking it.
  • HeightAnimation — to animate content as it opens or closes.
  • PortalRoot — to render floating content outside the normal page structure.

Demos

Keyboard-accessible overflow

Use interactive="auto" to make the region keyboard-focusable only when its content overflows. The example constrains its height to create vertical overflow.

large content
<ScrollView
  interactive="auto"
  aria-label="Scrollable color example"
  style={{
    maxHeight: '10rem',
  }}
>
  <div
    style={{
      minHeight: 800,
      display: 'flex',
      flexDirection: 'column',
      justifyContent: 'flex-end',
      background:
        'linear-gradient(rgba(255,0,0,1) 0%, rgba(255,154,0,1) 10%, rgba(208,222,33,1) 20%, rgba(79,220,74,1) 30%, rgba(63,218,216,1) 40%, rgba(47,201,226,1) 50%, rgba(28,127,238,1) 60%, rgba(95,21,242,1) 70%, rgba(186,12,248,1) 80%, rgba(251,7,217,1) 90%, rgba(255,0,0,1) 100%) 0 0/100% 200%',
    }}
  >
    large content
  </div>
</ScrollView>
Edit on GitHub