Components

Component

ScrollFog

Gradient fog at scroll edges.

ReactReact Native3 props
PreviewReact

Item 1

Item 2

Item 3

Item 4

Item 5

Item 6

Item 7

Item 8

Imports

import { ScrollFog } from "@hozorica/hods-react/scroll-fog";
import { ScrollFog } from "@hozorica/hods-react-native/scroll-fog";

Props

PropTypeDescription
placementtop | bottom | left | right[]Fog edge placement.
size / sizesnumber / RecordFog thickness.
hideScrollBarbooleanHides web scrollbars.

Platform Support

React

Wrapper with top/bottom/left/right non-interactive fog overlays.

React Native

Overflow wrapper compatibility implementation.

Usage

<ScrollFog><Content /></ScrollFog>

Notes

  • Use for scrollable regions where content continues beyond the viewport.