Bits of .NET

📱 Native Scroll Snap — No JavaScript

Horizontal carousels, full-page scroll, image galleries — all with CSS scroll snap. No JS, smooth physics, works everywhere.

📝 Full-Page Vertical Scroll Snap

.container {
  scroll-snap-type: y mandatory;
  overflow-y: scroll;
  height: 100vh;
}

.section {
  scroll-snap-align: start;
  height: 100vh;
}

/* HTML structure */
<div class="container">
  <section class="section">Page 1</section>
  <section class="section">Page 2</section>
  <section class="section">Page 3</section>
</div>

🎯 Horizontal Carousel

.carousel {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  gap: 1rem;
}

.carousel-item {
  scroll-snap-align: start;
  flex: 0 0 300px;
}

/* Smooth stopping */
.carousel-item:last-child {
  scroll-snap-align: end;
}

✅ Advanced Options

// Different snap alignments
scroll-snap-align: start;     // Snap to top/left
scroll-snap-align: center;    // Snap to center
scroll-snap-align: end;       // Snap to bottom/right

// Mandatory vs proximity
scroll-snap-type: y mandatory;   // Always snaps
scroll-snap-type: y proximity;   // Snaps if close

// Stop behavior
scroll-snap-stop: normal;     // Can skip snaps
scroll-snap-stop: always;     // Must stop at each snap

// Padding (for headers)
scroll-padding-top: 60px;     // Accounts for fixed header

💡 Use Cases

• Product galleries (horizontal scroll)
• Onboarding tutorials (full-page scroll)
• Image lightboxes (snap to each image)
• Horizontal timelines
• Sectioned landing pages