overflow-scroll-fade

Add a gradient-based dynamic fade effect to elements with scrollable overflow.

• ⚛️ React JSX based
• 🔄 Works with either horizontal or vertical overflow
• ❗ Requires the ScrollTimeline API
  • Currently works in Chrome, Edge and Opera
• ⚠️ Published as TypeScript and JSX see this post on 𝕏 for the reasoning

Note

This library is a much simpler successor to indicate which has less restrictions and more features but uses older and more performance intensive techniques.

Usage

import { Scroll } from 'overflow-scroll-fade'

const MyScroll = () => (
  <Scroll direction="horizontal">
    <p>overflow-scroll-fade</p>
    <p>overflow-scroll-fade</p>
  </Scroll>
)