Layout layoutscroll-snapux

Scroll Snap Page

Layout wrapper that snaps sections to the full viewport height.

Component preview not available for: scroll-snap-section

Ensure the filename matches ScrollSnapSection.astro

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