Scroll Snapping with Anchors and Coding

Ask the community
,
1

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:

654×650 8.88 KB

I am working in Google Chrome at 100% (default) zoom.

I can also provide screenshots of my anchor positions if needed.

2

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 .

3

Thank you for the help! We’ve unfortunately decided to scrap this idea for now.

I did find a solution that seemed to work really well by using only one anchor in the middle of each section and a scroll to anchor for each section. Doing this eliminated the scroll locking, so visitors could still free scroll, but once the middle anchor entered the view port, it would snap the section to the top of the screen to help align the content how we wanted.

It works for both scrolling up and down, but we decided to scrap this idea as well and just stick to free scrolling for now.

Here is the code for anyone interested:

var scrlock = 0

//scrolls to features
export function tofeature_viewportEnter() {   
    $w("#features").scrollTo()
    
}
export function tofeature_viewportLeave(event) {
scrlock = 0
}

//to welcome home

var scrlocktwo = 0

//scrolls to welcome home
export function towelcomehome_viewportEnter() {
    $w("#welcomehome").scrollTo(); 
    }

export function towelcomehome_viewportLeave(event) {
scrlocktwo = 0
}


 
//to 1 story

var scrlockthree = 0

//scrolls to 1 story
export function to1story_viewportEnter_1() {
    $w("#onestory").scrollTo();
    }
export function to1story_viewportLeave_1(event) {
scrlockthree = 0
}


 
//to 2 story

var scrlockfour = 0

//scrolls to 2 story
export function to2story_viewportEnter_1() {
    $w("#twostory").scrollTo();
    }
export function to2story_viewportLeave_1(event) {
scrlockfour = 0
}


 
//to 3 story

var scrlockfive = 0

//scrolls to 3 story
export function to3story_viewportEnter() {
    $w("#threestory").scrollTo();
    }
export function to3story_viewportLeave(event) {
scrlockfive = 0
}


 

//to we deliver

var scrlocksix = 0

//scrolls to we deliver
export function todeliver_viewportEnter() {
    $w("#deliver").scrollTo();
    }
export function todeliver_viewportLeave(event) {
scrlocksix = 0
}


 

//to app

var scrlockseven = 0

//scrolls to app
export function toapp_viewportEnter() {
    $w("#app").scrollTo();
    }
export function toapp_viewportLeave(event) {
scrlockseven = 0
}

var scrlockeight = 0

//scrolls to top. NOTE: i decided to add this last minute and did not want to move or update the rest of the code, that is why top is at the bottom, but it still worked

export function totop_viewportEnter() {
    $w("#top").scrollTo();
    }
export function totop_viewportLeave(event) {
scrlockeight = 0
}