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 heightoverflow-y: scroll
- Enables vertical scrollingscroll-behavior: smooth
- Creates smooth scrolling animationscroll-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 widthoverflow-y: hidden
- Prevents vertical scrollingoverflow-x: scroll
- Enables horizontal scrollingscroll-behavior: smooth
- Creates smooth scrolling animationscroll-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
- Ensure sufficient content: Each snap section should have enough content to justify snapping.
- Provide visual indicators: Use visual cues to indicate that content is scrollable with snap points.
- Test on all devices: Ensure the snapping behavior works well across different screen sizes and devices.
- Consider accessibility: Provide alternative navigation methods for users who may find scroll snapping disorienting.
- Avoid overuse: Use scroll snapping judiciously; not every scrollable container needs snapping behavior.
- 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.