> Markdown version of [Scroller](https://vaadin.com/docs/next/components/scroller). Section index: [llms.txt](https://vaadin.com/docs/next/components/llms.txt)

# Scroller

Scroller is a container component that enables scrollable areas within the UI.

**Lit** — `scroller-basic.ts`

```typescript
<vaadin-scroller theme="overflow-indicators" style="max-height: 300px">
  <vaadin-markdown .content="${this.eventDetails}"></vaadin-markdown>
</vaadin-scroller>
```

**Flow** — `ScrollerBasic.java`

```java
Markdown markdown = new Markdown(EVENT_DETAILS);

Scroller scroller = new Scroller(markdown);
scroller.addThemeName("overflow-indicators");
scroller.setMaxHeight(300, Unit.PIXELS);
```

**React** — `scroller-basic.tsx`

```tsx
<Scroller theme="overflow-indicators" style={{ maxHeight: '300px' }}>
  <Markdown>{eventDetails}</Markdown>
</Scroller>
```

## <a id="scroll-direction"></a>Scroll Direction

Scroller supports four scroll directions: **vertical**, **horizontal**, **both**, and **none**. The default is **both**.

### <a id="vertical"></a>Vertical

When vertical scrolling is enabled, users can scroll down if the content exceeds the container’s height. Horizontal overflow, however, is clipped and inaccessible—so the content’s width should be set to 100%.

### <a id="horizontal"></a>Horizontal

When horizontal scrolling is enabled, users can scroll sideways if the content exceeds the container’s width. However, vertical overflow is clipped and inaccessible—so the content’s height should be set to 100%.

> **Note:** Use horizontal scrolling with caution, as it’s less common and can be harder for users to notice and interact with—especially on non-mobile devices.

#### <a id="desktop"></a>Desktop

Aside from grids, horizontal scrolling is uncommon in desktop or business applications, as it can be unintuitive and cumbersome.

To improve usability, consider using buttons to make horizontal scrolling more noticeable and accessible. For horizontally scrollable lists, it’s good practice to indicate the total number of items and highlight which ones are currently in view.

#### <a id="mobile"></a>Mobile

Horizontal scrolling or swiping is more common on mobile, often used for navigation. It can also help conserve vertical space—for example, when displaying less important content such as shortcuts or images.

**Lit** — `scroller-mobile.ts`

```typescript
<vaadin-scroller scroll-direction="horizontal">
  <vaadin-horizontal-layout style="display: inline-flex" theme="padding spacing">
    <vaadin-button style="height: 100px;">
      <vaadin-icon icon="vaadin:clipboard-check" slot="prefix"></vaadin-icon>
      Audit
    </vaadin-button>
    <vaadin-button style="height: 100px;">
      <vaadin-icon icon="vaadin:book-dollar" slot="prefix"></vaadin-icon>
      Report
    </vaadin-button>
    <vaadin-button style="height: 100px;">
      <vaadin-icon icon="vaadin:line-chart" slot="prefix"></vaadin-icon>
      Dashboard
    </vaadin-button>
    <vaadin-button style="height: 100px;">
      <vaadin-icon icon="vaadin:invoice" slot="prefix"></vaadin-icon>
      Invoice
    </vaadin-button>
  </vaadin-horizontal-layout>
</vaadin-scroller>
```

**Flow** — `ScrollerMobile.java`

```java
Scroller scroller = new Scroller();
scroller.setScrollDirection(Scroller.ScrollDirection.HORIZONTAL);

Button auditBtn = new Button("Audit");
auditBtn.setIcon(new Icon(VaadinIcon.CLIPBOARD_CHECK));
auditBtn.setHeight("100px");

Button reportBtn = new Button("Report");
reportBtn.setIcon(new Icon(VaadinIcon.BOOK_DOLLAR));
reportBtn.setHeight("100px");

Button dashboardBtn = new Button("Dashboard");
dashboardBtn.setIcon(new Icon(VaadinIcon.LINE_CHART));
dashboardBtn.setHeight("100px");

Button invoiceBtn = new Button("Invoice");
invoiceBtn.setIcon(new Icon(VaadinIcon.INVOICE));
invoiceBtn.setHeight("100px");

HorizontalLayout buttons = new HorizontalLayout(auditBtn, reportBtn,
        dashboardBtn, invoiceBtn);
buttons.getStyle().set("display", "inline-flex");
buttons.setPadding(true);

scroller.setContent(buttons);
add(scroller);
```

**React** — `scroller-mobile.tsx`

```tsx
<Scroller scroll-direction="horizontal">
  <HorizontalLayout style={{ display: 'inline-flex' }} theme="padding spacing">
    <Button style={{ height: '100px' }}>
      <Icon icon="vaadin:clipboard-check" slot="prefix" />
      Audit
    </Button>
    <Button style={{ height: '100px' }}>
      <Icon icon="vaadin:book-dollar" slot="prefix" />
      Report
    </Button>
    <Button style={{ height: '100px' }}>
      <Icon icon="vaadin:line-chart" slot="prefix" />
      Dashboard
    </Button>
    <Button style={{ height: '100px' }}>
      <Icon icon="vaadin:invoice" slot="prefix" />
      Invoice
    </Button>
  </HorizontalLayout>
</Scroller>
```

### <a id="both"></a>Both

When the scroll direction is set to **Both** (the default), users can scroll both vertically and horizontally if the content overflows in either direction.

This option is ideal for allowing users to pan across large elements, such as images. It can also serve as a fallback for responsive layouts that may overflow in certain situations.

**Lit** — `scroller-both.ts`

```typescript
<vaadin-scroller style="height: 300px; width: 100%">
  <img src="${img}" alt="A reindeer walking on a snowy lake shore at dusk" />
</vaadin-scroller>
```

**Flow** — `ScrollerBoth.java`

```java
Scroller scroller = new Scroller();
scroller.setWidthFull();
scroller.setHeight("300px");

DownloadHandler imageHandler = DownloadHandler.forClassResource(
        getClass(), "/images/reindeer.jpg", "reindeer.jpg");

Image img = new Image(imageHandler,
        "A reindeer walking on a snowy lake shore at dusk");
scroller.setContent(img);

add(scroller);
```

**React** — `scroller-both.tsx`

```tsx
<Scroller style={{ height: '300px', width: '100%' }}>
  <img src={img} alt="A reindeer walking on a snowy lake shore at dusk" />
</Scroller>
```

### <a id="none"></a>None

Use **None** to hide overflowing content in either direction. No scrollbars are provided, and the clipped content is inaccessible. **None** is useful in fixed-size or fixed-layout scenarios where overflow would cause issues.

## <a id="related-components"></a>Related Components

| Component                                                                         | Usage recommendations                                          |
| --------------------------------------------------------------------------------- | -------------------------------------------------------------- |
| [Horizontal Layout](https://vaadin.com/docs/next/components/horizontal-layout.md) | A layout that aligns components and HTML elements horizontally |
| [Vertical Layout](https://vaadin.com/docs/next/components/vertical-layout.md)     | A layout that aligns components and HTML elements vertically.  |

`6DC07651-5F23-4ADD-B8CD-E87750453184`