Layout layoutscroll-snapux

Scroll Snap Page

Layout wrapper that snaps sections to the full viewport height.

Scroll Snap Page

Usage

Copy the full block below to use this component with its imports.

astro 
---
import { ScrollSnapPage } from 'astro-component-kit';
---

<ScrollSnapSection>Content</ScrollSnapSection>
--- import { ScrollSnapPage } from 'astro-component-kit'; --- <ScrollSnapSection>Content</ScrollSnapSection>

Manual Installation

If you are not using the npm package, create a new file src/components/lib/ScrollSnapPage.astro and paste the following code:

astro 
---
---
<div class="snap-wrap"><slot /></div>
<style>
  .snap-wrap { height: 100vh; overflow-y: scroll; scroll-snap-type: y mandatory; }
  .snap-wrap :global(section) { height: 100vh; scroll-snap-align: start; display: flex; align-items: center; justify-content: center; }
</style>
--- --- <div class="snap-wrap"><slot /></div> <style> .snap-wrap { height: 100vh; overflow-y: scroll; scroll-snap-type: y mandatory; } .snap-wrap :global(section) { height: 100vh; scroll-snap-align: start; display: flex; align-items: center; justify-content: center; } </style>

Quick Info

Category
Layout
Filename
ScrollSnapPage.astro
Dependencies
None — pure Astro + CSS
Tags
layoutscroll-snapux