Scroll

Scrollable regions must be focusable, promoted to region and with the right aria-label

To ensure keyboard-only users have access to the scrollable regions, the optimal solution is to apply

tabIndex="0" to the region. Learn more about the scrollable-region-focusable rule at Deque.

Scroll bar style

.eui-scrollBar className

Use this utility class to style the browser's scrollbar in a minimal aesthetic. This is best used on small, inner-page contents like panels wherever you have overflow: auto.

✄𐘗
tsx code block:
✄𐘗<div tabIndex={0} className="eui-scrollBar">
  <EuiPanel />
  <EuiPanel />
  <EuiPanel />
</div>

useEuiScrollBar() hook

Use this style function to style the browser's scrollbar in a minimal aesthetic. This is best used on small, inner-page contents like panels.

All parameters are optional and default to specific global settings.

✄𐘗
tsx code block:
✄𐘗css`
  ${useEuiScrollBar()}
`

Vertical (scroll-y)

These utilities allow for quickly applying vertical scrolling to a container. They also automatically apply the minimal scroll bar styles as well. If you do not want your content to stretch to 100% height, you will need to manually add a height (or max-height) to the container.

The WithShadows variants are primarily used in modals and flyouts and masks the edges to indicate there is more content. When using these variants, you may want to add a small amount padding to the top and bottom of your content so the mask doesn't overlay it.

.eui-yScroll className

Quick utility class for adding vertical scrolling to a container.

✄𐘗
tsx code block:
✄𐘗<div tabIndex={0} className="eui-yScrollWithShadows">
  <EuiPanel />
  <EuiPanel />
  <EuiPanel />
</div>

useEuiOverflowScroll('y') hook

Styles hook for adding vertical scrolling to a container.

To mask the top and bottom of the scrolled content, indicating visually that there is more content below, pass in true to the second parameter mask.

useEuiOverflowScroll('y', true);

✄𐘗
tsx code block:
✄𐘗css`
  ${useEuiOverflowScroll('y', true)}
`

Horizontal (scroll-x)

The horizontal equivalent should be used sparingly and usually only in full-height layouts or a grid of items.

When using the WithShadows variant, you may want to add a small amount padding to the sides of your content so the mask doesn't overlay it.

.eui-xScroll className

Quick utility class for adding horizontal scrolling to a container.

✄𐘗
tsx code block:
✄𐘗<div tabIndex={0} className="eui-xScrollWithShadows">
  <EuiPanel />
  <EuiPanel />
  <EuiPanel />
</div>

useEuiOverflowScroll('x') hook

Styles hook for adding horizontal scrolling to a container.

To mask the top and bottom of the scrolled content, indicating visually that there is more content below, pass in true to the second parameter mask.

useEuiOverflowScroll('x', true);

✄𐘗
tsx code block:
✄𐘗css`
  ${useEuiOverflowScroll('x', true)}
`

Full height layout

.eui-fullHeight className

Quick utility for expanding the height of the element to its parents dimensions. Use it to stretch each nested element until the one that applies scroll.

Works on both flex and non-flex elements.

Orbiting this at a distance of roughly ninety-two million miles is an utterly insignificant little blue green planet whose ape-descended life forms are so amazingly primitive that they still think digital watches are a pretty neat idea.

Orbiting this at a distance of roughly ninety-two million miles is an utterly insignificant little blue green planet whose ape-descended life forms are so amazingly primitive that they still think digital watches are a pretty neat idea.

✄𐘗
tsx code block:
✄𐘗<BodyContent style={{ height: 180 }}>
  <EuiFlexGroup className="eui-fullHeight" responsive={false}>
    <EuiFlexItem>
      <BodyScroll className="eui-yScroll" tabIndex={0} />
    </EuiFlexItem>
    <EuiFlexItem>
      <BodyScroll className="eui-yScroll" tabIndex={0} />
    </EuiFlexItem>
  </EuiFlexGroup>
</BodyContent>

euiFullHeight() function

Emotion mixin for adding full height scrolling to a container or flex child.

It applies height: 100%; overflow: hidden; but also adds flex: 1 1 auto; for use within flex containers.

✄𐘗
tsx code block:
✄𐘗css`
  ${euiFullHeight()}
`