Scroll Button
A minimal floating button that appears when the user scrolls up, allowing them to jump back to the bottom of the chat.
Item 1
This is a sample item to demonstrate scrolling behavior.
Item 2
This is a sample item to demonstrate scrolling behavior.
Item 3
This is a sample item to demonstrate scrolling behavior.
Item 4
This is a sample item to demonstrate scrolling behavior.
Item 5
This is a sample item to demonstrate scrolling behavior.
Item 6
This is a sample item to demonstrate scrolling behavior.
Item 7
This is a sample item to demonstrate scrolling behavior.
Item 8
This is a sample item to demonstrate scrolling behavior.
Item 9
This is a sample item to demonstrate scrolling behavior.
Item 10
This is a sample item to demonstrate scrolling behavior.
Item 11
This is a sample item to demonstrate scrolling behavior.
Item 12
This is a sample item to demonstrate scrolling behavior.
Item 13
This is a sample item to demonstrate scrolling behavior.
Item 14
This is a sample item to demonstrate scrolling behavior.
Item 15
This is a sample item to demonstrate scrolling behavior.
Item 16
This is a sample item to demonstrate scrolling behavior.
Item 17
This is a sample item to demonstrate scrolling behavior.
Item 18
This is a sample item to demonstrate scrolling behavior.
Item 19
This is a sample item to demonstrate scrolling behavior.
Item 20
This is a sample item to demonstrate scrolling behavior.
Installation
Copy and paste the following code into your project.
Examples
Basic Usage
The ScrollButton component works with a scroll context. Set up the context in a parent component and bind it to a scrollable container. The button automatically appears when scrolling up and hides when at the bottom.
Item 1
This is a sample item to demonstrate scrolling behavior.
Item 2
This is a sample item to demonstrate scrolling behavior.
Item 3
This is a sample item to demonstrate scrolling behavior.
Item 4
This is a sample item to demonstrate scrolling behavior.
Item 5
This is a sample item to demonstrate scrolling behavior.
Item 6
This is a sample item to demonstrate scrolling behavior.
Item 7
This is a sample item to demonstrate scrolling behavior.
Item 8
This is a sample item to demonstrate scrolling behavior.
Item 9
This is a sample item to demonstrate scrolling behavior.
Item 10
This is a sample item to demonstrate scrolling behavior.
Item 11
This is a sample item to demonstrate scrolling behavior.
Item 12
This is a sample item to demonstrate scrolling behavior.
Item 13
This is a sample item to demonstrate scrolling behavior.
Item 14
This is a sample item to demonstrate scrolling behavior.
Item 15
This is a sample item to demonstrate scrolling behavior.
Item 16
This is a sample item to demonstrate scrolling behavior.
Item 17
This is a sample item to demonstrate scrolling behavior.
Item 18
This is a sample item to demonstrate scrolling behavior.
Item 19
This is a sample item to demonstrate scrolling behavior.
Item 20
This is a sample item to demonstrate scrolling behavior.
Custom Styling
Customize the button's appearance using different variants and sizes. The button supports all standard button variants.
Of course! I'd be happy to help with your coding question. What would you like to know?
Creating a responsive layout with CSS Grid is straightforward. Here's a basic example:
.container { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1rem;}This creates a grid where:
- Columns automatically fit as many as possible
- Each column is at least 250px wide
- Columns expand to fill available space
- There's a 1rem gap between items
Would you like me to explain more about how this works?
Sure! The grid-template-columns property defines the columns of your grid layout. In the example I provided, we use the repeat() function to create a pattern for the columns. Here's a breakdown:
-
repeat(auto-fit, minmax(250px, 1fr)): This tells the grid to automatically fit as many columns as possible within the container. Each column will be at least 250px wide and can grow to fill available space (up to 1 fraction unit). -
auto-fit: This keyword allows the grid to create as many columns as will fit in the container. If there is extra space, it will distribute it among the columns. -
minmax(250px, 1fr): This function sets a minimum and maximum size for each column. The minimum is 250px, and the maximum is 1fr (which means it can grow to fill available space).
This approach creates a responsive grid that adjusts based on the screen size without needing media queries. As you resize the browser, the number of columns will change dynamically while maintaining a good layout.
Usage Guide
Setting Up the Context
The ScrollButton requires a scroll context to track the scroll position. Create the context in a parent component and bind it to your scrollable container:
Positioning the Button
Position the ScrollButton absolutely within your container. It's typically placed in the bottom-right corner:
Integration with ChatContainer
The ScrollButton pairs perfectly with the ChatContainer component. Both use similar context patterns for scroll management. See the ChatContainer documentation for integration examples.
Component API
ScrollButton
| Prop | Type | Default | Description |
|---|---|---|---|
variant | "default" | "outline" | "secondary" | "ghost" | "link" | "destructive" | "outline" | The visual style of the button |
size | "default" | "sm" | "lg" | "icon" | "sm" | The size of the button |
class | string | - | Additional CSS classes for custom styling |
ref | HTMLElement | null | - | Reference to the button element |
onclick | (event: MouseEvent) => void | - | Click event handler |
Scroll Context API
The scroll context provides functions and state for managing scroll behavior:
Scroll Context
| Prop | Type | Default | Description |
|---|---|---|---|
setScrollContext() | () => ScrollContext | - | Creates and sets the scroll context. Must be called in a parent component. |
getScrollContext() | () => ScrollContext | - | Retrieves the scroll context. Used internally by ScrollButton. |
scrollContext.setElement() | (element: HTMLElement | null) => void | - | Sets the scrollable container element to monitor. |
scrollContext.scrollToBottom() | (behavior?: ScrollBehavior) => void | - | Scrolls the container to the bottom with optional behavior ('smooth' or 'instant'). |
scrollContext.isAtBottom | boolean | - | Reactive state indicating if the container is scrolled to the bottom. |
Features
- Context-based visibility: Automatically shows/hides based on scroll position
- Smooth animations: Elegant fade and slide transitions
- Customizable styling: Supports all button variants and sizes
- SSR-safe: Handles server-side rendering gracefully
- Threshold detection: Configurable threshold for bottom detection (50px default)
- Smooth scrolling: Uses native smooth scroll behavior
Props
Scroll Button
| Name | Type | Default |
|---|---|---|
variant | "default" | "outline" | "secondary" | "ghost" | "link" | "destructive" | "outline" |
size | "default" | "sm" | "lg" | "icon" | "sm" |
class | string | |
ref | HTMLElement | null | |
onclick | (event: MouseEvent) => void | |
Scroll Context
| Name | Type | Default |
|---|---|---|
setScrollContext() | () => ScrollContext | |
getScrollContext() | () => ScrollContext | |
scrollContext.setElement() | (element: HTMLElement | null) => void | |
scrollContext.scrollToBottom() | (behavior?: ScrollBehavior) => void | |
scrollContext.isAtBottom | boolean | |