FullViewSnap

Available for React

A root viewport scroll wrapper for CSS scroll snapping, with integrated navigation and reusable UI components. Native momentum and snap points, cross-platform tested. Open source under the MIT license.

View on GitHub

See it for yourself

Examples

Basic

Render props for current view, totals, and scroll percentages.

Animated

Drive animations from content scroll percentage.

Navigation

Programmatic scrollToView pagination controls.

Sticky overlays

AbsoluteView for elements between snap sections.

Dynamic slide count

Add or remove FullView slides at runtime.

Enable toggle

Switch snap layout on and off with the enabled prop.

Live Example

Why FullViewSnap?

Unlike many JavaScript scroll plugins that recreate scrolling, this wrapper uses native CSS scroll snapping so touch gestures stay smooth and performant. It detects browser support and device capabilities so you deliver the best native experience without fighting snap points.

Read the article

Browser support

Cross-platform tested. Minimum versions from the package README.

Safari16 (Ventura)

EdgeEdge 85+

SamsungAndroid 9+

Firefox110+

Chrome85+

iOS Safari14+

Chrome iOS132+ (iOS 16+)

Firefox iOS141+ (iOS 16+)

Chrome Android128+ (Android 10+)

Firefox Androidv140+ (Android 9+)

Quick usage

Install from npm, then wrap your views with FullViewSnap and Controller.

npm install full-view-snap-react

import { FullViewSnap, Controller, FullView } from "full-view-snap-react";

<FullViewSnap
  hideScrollBars
  render={() => (
    <Controller>
      <FullView><h1>View 1</h1></FullView>
      <FullView><h1>View 2</h1></FullView>
    </Controller>
  )}
/>

Built by

Need help implementing FullViewSnap, integrating it into your stack, or advice on scroll-snap UX? We'd love to hear from you.

Get in touch

FullViewSnap is open source under the MIT License.