Skip to main content

ScrollMode

Defines scrolling behavior and scroll bar visibility for scrollable controls.

When assigned to flet.ScrollableControl.scroll, for example, each value internally maps to a specific Scrollbar configuration.

Inherits: enum.Enum

Properties

  • ADAPTIVE - Scrolling is enabled and scroll bar is always shown when running app as web or desktop.
  • ALWAYS - Scrolling is enabled and scroll bar is always shown.
  • AUTO - Scrolling is enabled and scroll bar is only shown when scrolling occurs.
  • HIDDEN - Scrolling is enabled, but scroll bar is always hidden.

Examples​

Showcase​

import flet as ft


def showcase_card(scroll_mode: ft.ScrollMode) -> ft.Container:
    return ft.Container(
        width=280,
        padding=12,
        border=ft.Border.all(1, ft.Colors.RED),
        border_radius=10,
        bgcolor=ft.Colors.SURFACE_CONTAINER_LOW,
        content=ft.Column(
            spacing=8,
            controls=[
                ft.Text(scroll_mode.name, weight=ft.FontWeight.BOLD),
                ft.Text("Scroll inside this panel", size=12),
                ft.Container(
                    height=170,
                    border=ft.Border.all(1, ft.Colors.OUTLINE),
                    border_radius=8,
                    bgcolor=ft.Colors.SURFACE,
                    padding=8,
                    content=ft.Column(
                        spacing=4,
                        scroll=scroll_mode,
                        controls=[ft.Text(f"Item {i + 1}") for i in range(24)],
                    ),
                ),
            ],
        ),
    )


def main(page: ft.Page):
    page.horizontal_alignment = ft.CrossAxisAlignment.CENTER

    page.appbar = ft.AppBar(title="ScrollMode Showcase")
    page.add(
        ft.SafeArea(
            content=ft.Column(
                controls=[
                    ft.Text(
                        "Compare scrollbar visibility and scrolling behavior modes."
                    ),
                    ft.Row(
                        wrap=True,
                        spacing=12,
                        expand=True,
                        scroll=ft.ScrollMode.AUTO,
                        alignment=ft.MainAxisAlignment.CENTER,
                        controls=[
                            showcase_card(scroll_mode) for scroll_mode in ft.ScrollMode
                        ],
                    ),
                ],
            ),
        )
    )


if __name__ == "__main__":
    ft.run(main)

Properties​

ADAPTIVEclass-attributeinstance-attribute​

Scrolling is enabled and scroll bar is always shown when running app as web or desktop.

Scrollbar equivalent:

ft.Scrollbar(
    thumb_visibility=page.web or not page.platform.is_mobile(),
    thickness=4.0 if page.platform.is_mobile() and not page.web else None,
)

ALWAYSclass-attributeinstance-attribute​

Scrolling is enabled and scroll bar is always shown.

Scrollbar equivalent:

ft.Scrollbar(
    thumb_visibility=True,
    thickness=4.0 if page.platform.is_mobile() and not page.web else None,
)

AUTOclass-attributeinstance-attribute​

Scrolling is enabled and scroll bar is only shown when scrolling occurs.

Scrollbar equivalent:

ft.Scrollbar(
    thickness=4.0 if page.platform.is_mobile() and not page.web else None,
)

HIDDENclass-attributeinstance-attribute​

Scrolling is enabled, but scroll bar is always hidden.

Scrollbar equivalent:

ft.Scrollbar(
    thickness=0,
)