StickToBottom Svelte
A powerful Svelte 5 hook for automatically scrolling to the bottom of containers when new content is added, with intelligent user interaction handling and configurable spring animations.
Perfect for Modern UIs
Chat Interfaces
Perfect for real-time messaging apps. Automatically scrolls to new messages while letting users read chat history.
Live Logs
Keep console outputs and streaming logs always visible. Great for monitoring dashboards and debugging tools.
Live Feeds
Social media feeds, news streams, and any continuously updating content that users want to follow in real-time.
Simple to Use
<script lang="ts">
import { StickToBottom } from 'stick-to-bottom-svelte';
let messages = $state([]);
let scrollElement = $state<HTMLElement>();
let contentElement = $state<HTMLElement>();
const stickToBottom = new StickToBottom({
scrollElement: () => scrollElement,
contentElement: () => contentElement,
damping: 0.7, // Smooth spring animation
stiffness: 0.05, // Animation speed
mass: 1.25 // Animation weight
});
function addMessage(text: string) {
messages = [...messages, { text, id: Date.now() }];
// Automatically scrolls to bottom if user is already there!
}
</script>
<div bind:this={scrollElement} class="h-96 overflow-y-auto">
<div bind:this={contentElement}>
{#each messages as message (message.id)}
<div class="message">{message.text}</div>
{/each}
</div>
</div>Interactive Demo
Try the hook in action! Scroll up to read previous messages, then scroll back down to see auto-scroll resume. The hook intelligently detects user behavior and responds accordingly.
StickToBottom Demo
A Svelte hook for smart auto-scrolling containers
Live Demo Chat
How to test:
- • Messages automatically appear and scroll to bottom
- • Scroll up to read previous messages - auto-scroll will pause
- • Scroll back near the bottom to re-enable auto-scroll
- • Send your own messages to see the interaction
- • Try different animation types and controls
Ready to Get Started?
Add intelligent auto-scrolling to your Svelte applications in minutes.
Quick Install
npm install stick-to-bottom-svelte