react-scroll-end-pinner

ScrollEndPinner is a React component for creating a scrollable area that stays scrolled to the end if the user has scrolled to the end when new content is added (or the content or the page is resized). This is useful for chat windows and logs.

TODO:

• write readme with usage example
• link to storybook example

Similar Techniques

This component gives a similar result as using the relatively new overflow-anchor: auto CSS rule as described in https://css-tricks.com/books/greatest-css-tricks/pin-scrolling-to-bottom/, but this component currently works in more browsers and doesn't require the element to be scrollable and scrolled first to take effect.

Assuming that the use of overflow-anchor: auto is as dependable as this component currently is, this component may be updated in the future to feature-detect overflow-anchor and use it when possible.

Types

TypeScript type definitions for this module are included!