Docs

Docs

Scroller

Source: TypeScript / Java
Scroller is a component container for creating scrollable areas in the UI.

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

Open in a
new tab
// Personal information
H3 personalTitle = new H3("Personal information");
personalTitle.addClassNames(LumoUtility.FontSize.LARGE);
personalTitle.setId(PERSONAL_TITLE_ID);

TextField firstName = new TextField("First name");
firstName.setWidthFull();

TextField lastName = new TextField("Last name");
lastName.setWidthFull();

DatePicker birthDate = new DatePicker("Birthdate");
birthDate.setInitialPosition(LocalDate.of(1990, 1, 1));
birthDate.setWidthFull();

Section personalInformation = new Section(personalTitle, firstName,
        lastName, birthDate);
personalInformation.getElement().setAttribute("aria-labelledby",
        PERSONAL_TITLE_ID);

// Employment information
H3 employmentTitle = new H3("Employment information");
employmentTitle.addClassNames(LumoUtility.FontSize.LARGE, LumoUtility.Margin.Top.LARGE);
employmentTitle.setId(EMPLOYMENT_TITLE_ID);

TextField position = new TextField("Position");
position.setWidthFull();

TextArea additionalInformation = new TextArea("Additional Information");
additionalInformation.setWidthFull();

Section employmentInformation = new Section(employmentTitle, position,
        additionalInformation);
employmentInformation.getElement().setAttribute("aria-labelledby",
        EMPLOYMENT_TITLE_ID);

Scroller scroller = new Scroller(new Div(personalInformation, employmentInformation));
scroller.addClassNames(LumoUtility.Border.BOTTOM, LumoUtility.Padding.MEDIUM);
scroller.setScrollDirection(Scroller.ScrollDirection.VERTICAL);
add(scroller);

Scroll Direction

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

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%.

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.

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.

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.

Open in a
new tab
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.addClassName(LumoUtility.Display.INLINE_FLEX);
buttons.setPadding(true);

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

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.

Open in a
new tab
Scroller scroller = new Scroller();
scroller.setWidthFull();
scroller.setHeight("300px");

StreamResource imageResource = new StreamResource("reindeer+.jpg",
        () -> getClass().getResourceAsStream("/images/reindeer.jpg"));

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

add(scroller);

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.

Theme Variants

Scroller has one theme variant: overflow-indicators.

This variant adds borders to indicate when content overflows the scroll container. For example, if more content is available by scrolling down, a bottom border appears. If content overflows at the top, a top border is shown, and so on for other directions.

You shouldn’t add padding to the scroller when using this variant, as it prevents the borders from appearing in the correct positions.

Open in a
new tab
TextField firstName = new TextField("First name");
TextField lastName = new TextField("Last name");
EmailField email = new EmailField("Email");
TextField phoneNumber = new TextField("Phone number");
TextField address = new TextField("Address");
TextField city = new TextField("City");
ComboBox<String> state = new ComboBox<>("State");
TextField zipCode = new TextField("Zip code");
ComboBox<String> country = new ComboBox<>("Country");

Div div = new Div(firstName, lastName, email, phoneNumber, address, city, state, zipCode, country);
div.addClassNames(LumoUtility.Display.FLEX, LumoUtility.FlexDirection.COLUMN, LumoUtility.Padding.Bottom.MEDIUM,
        LumoUtility.Padding.Horizontal.MEDIUM);

Scroller scroller = new Scroller(div);
scroller.addThemeVariants(ScrollerVariant.LUMO_OVERFLOW_INDICATORS);
scroller.setScrollDirection(Scroller.ScrollDirection.VERTICAL);
add(scroller);
Component Usage recommendations

Horizontal Layout

A layout that aligns components and HTML elements horizontally

Vertical Layout

A layout that aligns components and HTML elements vertically.

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