Use Stick To Bottom

Abstract

1. Introduction

A lightweight zero-dependency React hook + Component that automatically sticks to the bottom of container and smoothly animates the content to keep it's visual position on screen whilst new content is being added.

2. Objective

A lightweight React Hook intended mainly for AI chat applications, for smoothly sticking to bottom of messages

This project demonstrates how TypeScript can be applied to a real-world Full Stack Web Development problem.

3. Key Features / Modules

• Does not require overflow-anchor browser-level CSS support which Safari does not support.
• Uses the modern, yet well-supported, ResizeObserver API to detect when content resizes.
• Supports content shrinking without losing stickiness - not just getting taller.
• Correctly handles Scroll Anchoring. This is where when content above the viewport resizes, it doesn't cause the content currently displayed in viewport to jump up or down.
• Allows the user to cancel the stickiness at any time by scrolling up.
• Clever logic distinguishes the user scrolling from the custom animation scroll events (without doing any debouncing which could cause some events to be missed).
• Mobile devices work well with this logic too.
• Uses a custom implemented smooth scrolling algorithm, featuring velocity-based spring animations (with configurable parameters).
• Other libraries use easing functions with durations instead, but these doesn't work well when you want to stream in new content with variable sizing - which is common for AI chatbot use cases.
• scrollToBottom returns a Promise which will resolve to true as soon as the scroll was successful, or false if the scroll was cancelled.

4. Technology Stack

5. System Requirements

General requirements for this technology stack — check the README for exact versions.

• Node.js (LTS) and npm / yarn / pnpm
• VS Code or any code editor
• Git (to clone the repository)

6. Installation & Setup

git clone https://github.com/stackblitz-labs/use-stick-to-bottom.git
cd use-stick-to-bottom

npm install use-stick-to-bottom

Full setup instructions are in the project README.

7. Future Enhancements

Suggested extensions you can add to make this your own project.

• Add role-based access control
• Deploy on a VPS or cPanel hosting with a custom domain
• Add automated tests and a CI pipeline

8. Viva / Review Questions

Common questions examiners ask for projects in this domain.

1. Explain the frontend, backend and database layers of this application.
2. How is user authentication and authorisation implemented?
3. Describe the main database tables / collections and their relationships.
4. Which REST APIs or routes are exposed and what do they return?
5. How would you deploy this application to production?

9. Source Code & License

This project is developed by stackblitz-labs and published on GitHub under the MIT License. Please follow the license terms and credit the original author when you use or modify this code.