top of page

Full Screen
Scroll Snap

First We need to get all the page sections

Then we will store in array all the elements we have defined as backgrounds for the page sections

Finally,
we will create a loop on the background array and define that each time the background enters the viewport the page will scroll to right section

Full Code

import wixWindow from 'wix-window';

const pageSections = [];

$w.onReady(function () {
    if (wixWindow.formFactor === "Desktop") {
        getPageSections();
        initSectionScrollSnap();
    }
});

function getPageSections() {
    $w('Page').children.forEach(section => {
        section.type === '$w.Section' && pageSections.push(section);
    });
}

function initSectionScrollSnap() {
    const bgShapes = [
        // this is what you need to replace. this is all the sections background shapes.
        'section1Background',
        'section2Background',
        'section3Background',
        'section4Background',
        'section5Background',
        'section6Background'
    ];

    bgShapes.forEach((container, index) => {
        const bgShape = $w(`#${bgShapes[index]}`);

        bgShape.onViewportEnter(async () => {
            await pageSections[index].scrollTo();
        });
    })
}

Copy code

Watch the
full tutorial

bottom of page