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
ExpandCollapse
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:
- 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.
- 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 | Description |
|---|---|---|
access_key | str | Provides a hint for generating a keyboard shortcut for the current element. |
auto_capitalize | "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 | "inherit""plaintext-only" | 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 | "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 | "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 | "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. |