Full Screen Sections Scroll Snap | Editor X

Is there any way to get scroll snap to work in the classic editor? I used the code in Velo and scrolling down works fine. But scrolling up is wonky. I need to scroll up about 3 times before it snaps up, and even then, it snaps all the way up to the first section. In classic editor I can't seem to set the object to dock, can't set section height to 100vh and can't set 1% margins. Are these dealbreakers for this code to work properly? Any advice would be appreciated.

Awesome video, thank you.

Hey, is there anyway to replicate this on classic Wix editor? esp the viewport height percentage part with a code or something?

Too bad its not works for mobile …

Thanks bro

Great stuff thank you! Unfortunately it doesn't work on mobile and in Chrome Browser on Mac, PC and iPad. Cheers, Ian

Heyyy loved your video!
I'm having a problem though.
I've copied and pasted the code from the second method, and as I go down, it works just fine. However when I try to go back up, it doesn't work unless I'm on the last section. But then, the scrolling goes up to the first section on its own.
I've tried rebuilding and resizing sections, but still the same.
Please helppppp 😭🙏

Thanks! Works like a charm :)

Bro, I'm having an issue, and the issue is that It's doesn't work correctly, it's automatically scrolling out when the site is published along with not proper snapping!
I have a footer on the top is that issue? Can you fix this? btw nice tut

mis dieses

Hey! Great video, as always! 🙂🙂🙂
See, I´ve trying to use this on my new project (by the second method), but, for some reason, that´s what happens:

The effect works perfectly on the first three sections, but won´t work on the fourth one (no matter how many times I rebuild the section and the shape)...
I´m sure the code is exactly like yours and the background shape ID is correct.

Do you have any guess what might be causing this issue?

Anyway, thank you for this useful content! 👏

Good job! I see about the mobile version, I take it there’s no issues with tablet version?

Bro, I love your tuts. I know nothing about JavaScript, so this is the perfect "classroom" for me. Thanks so much!!

I copied the code and updated the IDs, then had to add this line at the top (import wixWindow from 'wix-window';), as the 'wixWindow" was showing an error.

The issue I'm having is when scrolling up. I have 5 sections. It doesn't snap at first, but then it kicks in and scrolls all the way to the top. The site is not published, though, if that matters. What could be wrong? This is what I have:

const pageSections = [];
let onProgress = false;

import wixWindow from 'wix-window';

$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.
'svg01',
'svg02',
'svg03',
'svg04',
'svg05'
];


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

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