> For AI agents: the complete documentation index is at [llms.txt](https://reflex.dev/docs/llms.txt). Markdown versions are available by appending `.md` or sending `Accept: text/markdown`.

---
components:
  - rx.auto_scroll
---

```python exec
import reflex as rx
```

# Auto Scroll

The `rx.auto_scroll` component is a div that automatically scrolls to the bottom when new content is added. This is useful for chat interfaces, logs, or any container where new content is dynamically added and you want to ensure the most recent content is visible.

## Basic Usage

```python demo exec
import reflex as rx


class AutoScrollState(rx.State):
    messages: list[str] = ["Initial message"]

    def add_message(self):
        self.messages.append(f"New message #{len(self.messages) + 1}")


def auto_scroll_example():
    return rx.vstack(
        rx.auto_scroll(
            rx.foreach(
                AutoScrollState.messages,
                lambda message: rx.box(
                    message,
                    padding="0.5em",
                    border_bottom="1px solid #eee",
                    width="100%",
                ),
            ),
            height="200px",
            width="300px",
            border="1px solid #ddd",
            border_radius="md",
        ),
        rx.button("Add Message", on_click=AutoScrollState.add_message),
        width="300px",
        align_items="center",
    )
```

The `auto_scroll` component automatically scrolls to show the newest content when it's added. In this example, each time you click "Add Message", a new message is added to the list and the container automatically scrolls to display it.

## When to Use Auto Scroll

- **Chat applications**: Keep the chat window scrolled to the most recent messages.
- **Log viewers**: Automatically follow new log entries as they appear.
- **Feed interfaces**: Keep the newest content visible in dynamically updating feeds.

## Props

`rx.auto_scroll` is based on the `rx.div` component and inherits all of its props. By default, it sets `overflow="auto"` to enable scrolling.

Some common props you might use with `auto_scroll`:

- `height`: Set the height of the scrollable container.
- `width`: Set the width of the scrollable container.
- `padding`: Add padding inside the container.
- `border`: Add a border around the container.
- `border_radius`: Round the corners of the container.

## How It Works

The component tracks when new content is added and maintains the scroll position in two scenarios:

1. When the user is already near the bottom of the content (within 50 pixels), it will scroll to the bottom when new content is added.
2. When the container didn't have a scrollbar before but does now (due to new content), it will automatically scroll to the bottom.

This behavior ensures that users can scroll up to view older content without being forced back to the bottom, while still automatically following new content in most cases.

## API Reference

### rx.auto_scroll

A div that automatically scrolls to the bottom when new content is added.

#### Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `access_key` | str | - | Provides a hint for generating a keyboard shortcut for the current element. |
| `auto_capitalize` | Literal["off", "none", "on", "sentences", "words", "characters"] | - | Controls whether and how text input is automatically capitalized as it is entered/edited by the user. |
| `content_editable` | Literal["inherit", "plaintext-only"], bool | - | Indicates whether the element's content is editable. |
| `context_menu` | str | - | Defines the ID of a <menu> element which will serve as the element's context menu. |
| `dir` | str | - | Defines the text direction. Allowed values are ltr (Left-To-Right) or rtl (Right-To-Left). |
| `draggable` | bool | - | Defines whether the element can be dragged. |
| `enter_key_hint` | Literal["enter", "done", "go", "next", "previous", "search", "send"] | - | Hints what media types the media element is able to play. |
| `hidden` | bool | - | Defines whether the element is hidden. |
| `input_mode` | Literal["none", "text", "tel", "url", "email", "numeric", "decimal", "search"] | - | Defines the type of the element. |
| `item_prop` | str | - | Defines the name of the element for metadata purposes. |
| `lang` | str | - | Defines the language used in the element. |
| `role` | Literal["alert", "alertdialog", "application", "article", "banner", "button", "cell", "checkbox", "columnheader", "combobox", "complementary", "contentinfo", "definition", "dialog", "directory", "document", "feed", "figure", "form", "grid", "gridcell", "group", "heading", "img", "link", "list", "listbox", "listitem", "log", "main", "marquee", "math", "menu", "menubar", "menuitem", "menuitemcheckbox", "menuitemradio", "navigation", "none", "note", "option", "presentation", "progressbar", "radio", "radiogroup", "region", "row", "rowgroup", "rowheader", "scrollbar", "search", "searchbox", "separator", "slider", "spinbutton", "status", "switch", "tab", "table", "tablist", "tabpanel", "term", "textbox", "timer", "toolbar", "tooltip", "tree", "treegrid", "treeitem"] | - | Defines the role of the element. |
| `slot` | str | - | Assigns a slot in a shadow DOM shadow tree to an element. |
| `spell_check` | bool | - | Defines whether the element may be checked for spelling errors. |
| `tab_index` | int | - | Defines the position of the current element in the tabbing order. |
| `title` | str | - | Defines a tooltip for the element. |

#### Event Triggers

Base event triggers: https://reflex.dev/docs/api-reference/event-triggers/