Learn how to use a lesser-known browser event along with a Resize Observer hook to build a Chat GPT–like autoscrolling component in React.

- Demo from video: https://stackblitz.com/~/github.com/samselikoff/2024-10-30-wheel-event
- MDN wheel event: https://developer.mozilla.org/en-US/docs/Web/API/Element/wheel_event
- stackblitz/use-stick-to-bottom: https://github.com/stackblitz/use-stick-to-bottom

👉 I'm working on a new course! Check it out here: https://buildui.com/courses/advanced-react-component-patterns

Timestamps:

0:00 - Intro
0:27 - Auto-scroll the parent with useOnResize
4:41 - Letting the user escape auto-scrolling
4:41 - What's wrong with the "scroll" event
5:49 - Solution: the "wheel" event
7:37 - Resuming auto-scrolling when scrolled to bottom
10:16 - Adding a button to resume auto-scrolling
13:30 - use-stick-to-bottom library

Sam Selikoff

Learn how to distinguish between human and programmatic scrolling in JavaScript by using the 'wheel' event. The post demonstrates how to implement automatic scrolling while allowing the user to take control when they scroll manually. It introduces the ResizeObserver and shows a practical implementation of managing auto-scroll behavior in a chat simulation.

Distinguishing between human and programmatic scrolling