Scroll Snap Effects

Scroll snap utilities in the Phenix Design System create smooth, controlled scrolling experiences by making the viewport snap to specific elements or positions during scrolling.

Overview

The Phenix Design System offers two primary scroll snap utilities:

• Vertical Scroll Snap (.px-section-snap) - For vertical scrolling with snap points
• Horizontal Scroll Snap (.px-section-snap-x) - For horizontal scrolling with snap points

Both utilities come with options to control the snap behavior and can be applied to create engaging, section-based layouts.

Vertical Scroll Snap

Vertical scroll snapping creates a full-height scrollable container where the viewport locks onto specific sections as the user scrolls vertically.

<!-- Vertical scroll snapping container -->
<div class="px-section-snap">
  <div class="px-section-snap-item">Section 1</div>
  <div class="px-section-snap-item">Section 2</div>
  <div class="px-section-snap-item">Section 3</div>
</div>

The .px-section-snap class applies:

• max-height: 100vh - Limits container height to viewport height
• overflow-y: scroll - Enables vertical scrolling
• scroll-behavior: smooth - Creates smooth scrolling animation
• scroll-snap-type: y mandatory - Forces snapping on vertical axis

Child elements with .px-section-snap-item class (or any div without .no-snap class) automatically receive scroll-snap-align: start to define snap points.

Horizontal Scroll Snap

Horizontal scroll snapping creates a full-width scrollable container where the viewport locks onto specific sections as the user scrolls horizontally.

<!-- Horizontal scroll snapping container -->
<div class="px-section-snap-x">
  <div class="px-section-snap-item">Section 1</div>
  <div class="px-section-snap-item">Section 2</div>
  <div class="px-section-snap-item">Section 3</div>
</div>

The .px-section-snap-x class applies:

• max-width: 100vw - Limits container width to viewport width
• overflow-y: hidden - Prevents vertical scrolling
• overflow-x: scroll - Enables horizontal scrolling
• scroll-behavior: smooth - Creates smooth scrolling animation
• scroll-snap-type: x mandatory - Forces snapping on horizontal axis

Snap Behavior Options

By default, both scroll snap containers use mandatory snapping, which forces the viewport to snap to a snap point when scrolling ends. You can modify this behavior with the .proximity class:

<!-- Vertical scroll with proximity snapping -->
<div class="px-section-snap proximity">
  <div class="px-section-snap-item">Section 1</div>
  <div class="px-section-snap-item">Section 2</div>
</div>

<!-- Horizontal scroll with proximity snapping -->
<div class="px-section-snap-x proximity">
  <div class="px-section-snap-item">Section 1</div>
  <div class="px-section-snap-item">Section 2</div>
</div>

The .proximity modifier changes the snap behavior:

• Mandatory (default): Always snaps to a snap point when scrolling ends
• Proximity (with .proximity): Only snaps to a snap point if scrolling ends near one

Excluding Elements from Snapping

If you need certain child elements within a snap container to be excluded from snapping, add the .no-snap class:

<div class="px-section-snap">
  <div class="px-section-snap-item">This will snap</div>
  <div class="no-snap">This will NOT snap</div>
  <div>This will snap (any div without .no-snap)</div>
</div>

Usage Examples

Scroll snap is particularly useful for:

• Full-page sections: Create a full-page scrolling experience with distinct sections
• Image galleries: Create horizontally scrollable image galleries with snap points
• Step-by-step interfaces: Guide users through sequential content with clear stopping points
• Product showcases: Display products in a scrollable container with each product snapping into view

Example: Full-Page Vertical Sections

<div class="px-section-snap">
  <div class="px-section-snap-item vh-100 pd-30 bg-primary color-white">
    <h2>Welcome Section</h2>
    <p>Scroll down to explore more</p>
  </div>
  <div class="px-section-snap-item vh-100 pd-30 bg-secondary color-white">
    <h2>Features Section</h2>
    <p>Our key features explained</p>
  </div>
  <div class="px-section-snap-item vh-100 pd-30 bg-dark color-white">
    <h2>Contact Section</h2>
    <p>Get in touch with us</p>
  </div>
</div>

Example: Horizontal Image Gallery

<div class="px-section-snap-x display-flex">
  <div class="px-section-snap-item width-100 pdx-15">
    <img src="image1.jpg" alt="Gallery Image 1" class="width-100">
  </div>
  <div class="px-section-snap-item width-100 pdx-15">
    <img src="image2.jpg" alt="Gallery Image 2" class="width-100">
  </div>
  <div class="px-section-snap-item width-100 pdx-15">
    <img src="image3.jpg" alt="Gallery Image 3" class="width-100">
  </div>
</div>

Best Practices

1. Ensure sufficient content: Each snap section should have enough content to justify snapping.
2. Provide visual indicators: Use visual cues to indicate that content is scrollable with snap points.
3. Test on all devices: Ensure the snapping behavior works well across different screen sizes and devices.
4. Consider accessibility: Provide alternative navigation methods for users who may find scroll snapping disorienting.
5. Avoid overuse: Use scroll snapping judiciously; not every scrollable container needs snapping behavior.
6. Combine with JavaScript: For more complex interactions, consider enhancing scroll snap with JavaScript controls.

Browser Support

Scroll snap is well-supported in modern browsers. However, for older browsers, consider providing fallback behavior or using feature detection.

Advanced Usage

For more complex scrolling interactions or carousels with navigation controls, consider combining scroll snap with the Phenix Carousel Slider JavaScript component.