@yrobot/auto-scroll

A lightweight tool to auto-scroll content on your website.

🚀 Live Demo

📖 Table of Contents

• Showcase
• Installation
  • npm
  • CDN (IIFE)
• Features
• Built-in Plugins
• License
• Changelog

---

Showcase

Auto-scroll for AI chat interfaces

Perfect for AI chat pages - automatically scrolls to bottom when new messages arrive.

---

Installation

npm

npm install @yrobot/auto-scroll

Usage:

import autoScroll from "@yrobot/auto-scroll";

autoScroll({
  selector: "#scroll-container-id",
  // OR: pass the container element directly
  // container: document.getElementById("scroll-container-id")
});

CDN (IIFE)

For usage without a build system:

<script src="https://cdn.jsdelivr.net/npm/@yrobot/auto-scroll/build/index.iife.js"></script>
<script>
  autoScroll.default({
    selector: "#scroll-container-id",
    // OR: pass the container element directly
    // container: document.getElementById("scroll-container-id")
  });
</script>

---

Features

✨ Handles Multiple Scroll Scenarios

• ✅ Dynamic content additions - Automatically scrolls when child elements are added to the container
• ✅ Growing content - Automatically scrolls when child element height increases (e.g., streaming text in chat interfaces)

---

Built-in Plugins

🎁 Pre-built plugins are ready to use out of the box - no configuration needed!

escapeWhenUpPlugin

What it does: Pauses auto-scrolling when the user manually scrolls up to read previous content.

Perfect for: Chat interfaces where users may want to review conversation history without constant interruption.

ES Module

import autoScroll, { escapeWhenUpPlugin } from "@yrobot/auto-scroll";

autoScroll({
  selector: "#scroll-container-id",
  plugins: [escapeWhenUpPlugin()],
});

IIFE

<script>
  autoScroll.default({
    selector: "#scroll-container-id",
    plugins: [autoScroll.escapeWhenUpPlugin()],
  });
</script>

---

License

MIT

---

Changelog

See CHANGELOG.md for release history.