Scroll Snap Effect | Custom Scrollbar Using Framer

Here, I’ve provided a detailed tutorial on implementing the Scroll Snap Effect in Framer, I’ve also demonstrated enable a custom scrollbar.

Source Codes:

For Main Container:

import type { ComponentType } from "react"

const style = {
    scrollSnapType: "y mandatory",
}

export const myCodeOverride = (Component): ComponentType => {
    return (props) => {
        return <Component {...props} style={style} />
    }
}

For Three Sections:

import type { ComponentType } from "react"

const style = {
    scrollSnapAlign: "start",
    scrollSnapStop: "always",
}

export const myCodeOverride = (Component): ComponentType => {
    return (props) => {
        return <Component {...props} style={style} />
    }
}

For Scroll Style:

<style> 
    ::-webkit-scrollbar{
        width: 0px;
        border-radius: 10px;
    }
    ::-webkit-scrollbar-track{
        background: none;
    }
    ::-webkit-scrollbar-thumb { 
        background: rgb(255 255 255 / 10%);
        border-radius: 10px;
    }
    ::-webkit-scrollbar-thumb:hover { 
        background: rgb(255 255 255 / 15%);
    }
</style>