I'm currently working on a site for the company I work for. I've searched around for a scroll snapping solution for the Wix Editor and came across something that actually works for the most part (why hasn't Wix come out with a feature for this yet? It's been requested for YEARS from what I can tell from my searches). I found the code here: https://www.wix.com/corvid/forum/main/comment/5d541270c245a700167e5b6f
After copying the sections so that I can have 5 "pages," I worked through it and made sure that the ID tags and any other needed changes were made. So far, it scroll snaps down and up, but once I go back to the very top (even if just scrolling down once and back up), the scroll snapping does not work for the third page/section. Then, if I scroll past the third page, it will lock to the fourth page, and I can scroll back up to the third page, where it snaps again. But scrolling all the way back up to the top brings the first page partially into view but automatically scrolls back to the second page (this only happens when I run into the 3rd page scroll snap issue).
What could possibly be making the third page to stop snapping, and consequently the 2nd page to snap when trying to go back to the 1st? I don't see any issues with the code, but then again, I know very basic coding so there might be an issue I can't see or don't even think of.
Here is the website I'm working on: https://nn1406.wixsite.com/mysite
Here is my code in the site tab:
var lock2 = 0
var lock3 = 0
var lock4 = 0
var lock5 = 0
//page home to features
var scrlock = 0
//scrolls to page 2
export function tofeature_viewportLeave() {
$w("#features").scrollTo()
}
//when coming back up 'closes' the scrolling lock
export function tofeature_viewportEnter(event) {
scrlock = 0
}
//if scroll lock is 'open (=10)' scroll to the top else open the scroll lock
export function backtop_viewportEnter() {
if (lock2 === 0) {
lock2 =1
} else {lock2 = 0
}
if (scrlock === 10) {
$w("#anchortop").scrollTo();
} else {
scrlock= 10
}
}
//page features to welcome home
var scrlocktwo = 0
//scrolls to page 3
export function towelcomehome_viewportLeave() {
if (lock2 === 1) {
$w("#welcomehome").scrollTo();
}
}
//when coming back up to page 2 'closes' the scrolling lock
export function towelcomehome_viewportEnter() {
scrlocktwo = 0
}
//if scroll lock is 'open (=10)' scroll to the page 2 else open the scroll lock
export function backtofeatures_viewportEnter() {
if (lock3 === 0) {
lock3 =1
} else {lock3 = 0
}
if (scrlocktwo === 10) {
$w("#features").scrollTo();
} else {
scrlocktwo= 10
}
}
//page welcome home to deliver
var scrlockthree = 0
//scrolls to page 4
export function todeliver_viewportLeave() {
if (lock3 === 1) {
$w("#deliver").scrollTo();
}
}
//when coming back up to page 3 'closes' the scrolling lock
export function todeliver_viewportEnter() {
scrlockthree = 0
}
//if scroll lock is 'open (=10)' scroll to the page 3 else open the scroll lock
export function backtowelcomehome_viewportEnter() {
if (lock4 === 0) {
lock4 =1
} else {lock4 = 0
}
if (scrlockthree === 10) {
$w("#welcomehome").scrollTo();
} else {
scrlockthree= 10
}
}
//page deliver to app
var scrlockfour = 0
//scrolls to page 5
export function toapp_viewportLeave() {
if (lock4 === 1) {
$w("#app").scrollTo();
}
}
//when coming back up to page 4 'closes' the scrolling lock
export function toapp_viewportEnter() {
scrlockfour = 0
}
//if scroll lock is 'open (=10)' scroll to the page 4 else open the scroll lock
export function backtodeliver_viewportEnter() {
if (lock5 === 0) {
lock5 =1
} else {lock5 = 0
}
if (scrlockfour === 10) {
$w("#deliver").scrollTo();
} else {
scrlockfour= 10
}
}
I realize it may not work properly on all screen resolutions and setups so I'm not sure if it will even be a feasible feature to continue working on. Here are my display settings:
I am working in Google Chrome at 100% (default) zoom.
I can also provide screenshots of my anchor positions if needed.
Hi, I have checked your site and I see that the scroll is triggered by viewport enter/leave events.
As advised in the post you have linked, the size of the viewport depends on device, resolution, browser, zoom setting;
When two elements with viewport event are on the screen it causes a conflict of what action to perform.
You can achieve the same functionality using window height (e.g. if the height is below x value - scroll down, if the height is above x value, scroll up).
However note that different screens and resolutions will cause different element's height position, therefore you will need to perform a lot of testing on different devices and changing the code accordingly for each.
Note that you can hire a Wix Partner to help you achieve the desired functionality using the guidelines here.