---
title: "Scroll Snap — Framer component · Best of Framer"
description: "$15.00 · Framer component · by Nabeel · Sections. About SnapScroll is a component that adds a vertical scrolling container with snap-to-section functionality for Framer."
canonical: "https://framer.elliotli.dev/component/scroll-snap"
---

[Home](/)/[Components](/components)/[Sections](/components/category/sections)/Scroll Snap

# Scroll Snap

[View on Framer](https://framer.com/marketplace/components/scroll-snap/?via=elliot-li)

![Scroll Snap preview image 1](https://framer.elliotli.dev/og/component/scroll-snap/00a6ff95423c3cfe/1600x1200.jpg)

## Summary

About SnapScroll is a component that adds a vertical scrolling container with snap-to-section functionality for Framer.

## Description

## About

SnapScroll is a component that adds a vertical scrolling container with snap-to-section functionality for Framer. It allows for smooth scrolling between different content sections and includes a custom scrollbar for visual feedback. Ideal for creating interactive presentations and product showcases.

This component a part of the 400+ components, layouts, templates, UI Kits and code overrides from SegmentUI PRO. Click [here](https://segmentui.com/uikit) to see the full library

## Instructions

1.  Import SnapScroll into your Framer project.
    
2.  Set the height as 100vh for the component
    
3.  Connect sections to the component from outside. You can add how many ever you want. The sections will be stretched to the size of the container
    
4.  Adjust the 'Scrollbar Color' and 'Scrollbar Width' as desired.
    
5.  Preview your project to see the snap scrolling in action.
    

## How It works

![](https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/description-image-67abj8u9-j54eKzE3mDyRFyrUgpCXI3AABgwwgi)![](https://framerusercontent.com/images/DSH6O4iUBfwMRrB7Mn0oU8TcdnU.png)

The component works by taking in an array of sections/layers as inputs and stretching them to the size of the container. You have full flexibility to determine the size of the container - including full screen. Apart from this, you have the added option of showing a scrollbar. When you scroll with your mouse inside the component, the scroll to snap effect becomes active

## Support

For any queries and help setting up the component, contact [hello@segmentui.com](mailto:hello@segmentui.com)

## Rank history [How rankings work →](/terms#rankings)

-   All · #3637

## Details

- **Author**: Nabeel
- **Price**: $15.00
- **Published**: 2025-07-29
- **Updated**: 2025-08-07
- **Added**: 2025-07-29
- **Categories**: Sections

## More like this

-   [Sale Bar](/component/sale-bar) — Brandon Grimes · $12 — Auto-start Black Friday promo bar
-   [Show and Tell](/component/show-and-tell) — Majed Monem · $9 — Feature tabs that play themselves
-   [Infinite Picker Whee](/component/infinite-picker-whee) — Karim Saif · Free — Rotating 3D text selector
-   [Resource Preview Dec](/component/resource-preview-dec) — felix strobel · Free — Editorial guides with folding cove