Locked Scroll Feature (Tutorial)

Show and tell
, ,
1

Hello Wixers, The name of this tutorial might be wrong as I’m not a coder so I kindly ask the moderators to correct the title name if its wrong for search purposes…

About

Ever seen a website where scrolling is controlled? Controlled means that when you scroll once it takes you to the next section without scrolling too much (one scroll touch)? Well if you wanna know how on wix, then you are in the right place… Please note that this feature was requested from wix support but they said its not available in wix but with some hard working research and alot of trying and failing, I give you the feature using WIXCODE and ANCHORS .

The Result


Live Example Here https://samidesigns.wixsite.com/samidesign
This is a One-Scroll-Touch so you only scroll once to go to the next section and even if you try scrolling rapidly it will not respond to it.

Working With Anchors

For this to work you will need to work very carefully with anchors, One wrong move and it will not work and it will look messy. So follow the tutorial step by step:

Setting up Scroll Down

  1. Drag and drop an anchor from the left side menu in the wix editor and name it Anchortop, Right Click on it > Properties > ID and rename it to Anchortop as well

  1. Place Anchor Anchortop at the very top of your websites’ page

1920×239 61.1 KB

3. Drag and drop a second anchor from the left side menu in your editor. In my case, my next section is my featured design work so i called it tofeaturedwork or you can keep its name “anchor2” as long as you dont get confused later on but feel free to name it as you wish and bare in mind these names will be used later for coding. Place the anchor close to the Anchortop
but not too close so it wont trigger automatically on loading and without scrolling.

  1. Right Click on it > Properties > set ID to tofeaturedwork
    In the Events section:
    onViewportLeave >
    Click the small + button on the right to add the event so you will see this:
    tofeaturedwork_viewportLeave

Before pressing enter to save add " on " to the event so it becomes this:
tofeaturedwork_onviewportLeave

Leave the onViewportEnter empty.
Your setting should look exactly like this:


5. Drag and drop a new anchor and place it on the next section in the page you want the visitors to go to when scrolling down.

Name it as you wish then right click > Properties > ID “Section Name” I named it featuredwork

Event Section will be clear and nothing to add there.

Setting up Scroll Up

  1. Add a new anchor and call it “backtop”
  2. Place it near to and on top of anchor2 or on top of the anchor of your current section so when the visitor scrolls up, it takes him to the previous section. Dont place too near or it will automatically scroll up when loaded and not too far so your visitor wont see the empty space in the website, Has to be reasonable distance.

1920×543 126 KB

Circled Red: Is the Scroll Up Trigger
Circled Blue: Is the current section

  1. Right Click > Properties > ID backtop as well
  2. Events Section Setup:
    onViewportEnter > Click the small + on the right and you will see:
    backtop_viewportEnter now add “on” after the underscore so it will be :
    backtop_onviewportEnter

Your settings should look like this:

Working With Codes

After you have saved and done the Working With Anchors , Go down to the code console and clear any codes from the “page” section.

1920×268 6.13 KB

STOP,

Ok now before we move on any further, let us revise and list the anchors and understand the logic of this:

  1. tofeaturedwork : This is the scroll down trigger which will take the visitor down to the next section on the page called “Featured Work” when scrolling.
  2. featuredwork : Is the destination of the Scroll down.
  3. backtop : Is the scroll up trigger which will take the visitor up to the previous section when scrolling
  4. Anchortop : Is the destination of the scroll up trigger backtop

Codes

This code should go into “Site” Tab in your site codes section.

export function tofeaturedwork_onviewportLeave() {
    $w("#featuredwork").scrollTo();
}

export function backtop_onviewportEnter() {
    $w("#Anchortop").scrollTo();
}

All questions are welcome :slight_smile:

UPDATE 10 April 2018 : Unfortunately after running some more tests, This Method will only work on two sections and will be a complete mess if you try to do it to more than two sections on your page, I have tried over and over and over again for 4 straight hours to over come the issue but no avail. So I recommend using this if you want to do it for two sections, other than that I apologize WIX havent added this feature yet and its still in the suggested features section in the support :frowning:

SamiDesigns

2

Hello! Nice work, thanks for sharing! Could you please clarify if the strip with search bar which appears after scrolling belongs to the header or not?

3

@greyhound72
Yes it belongs to the header and its a different thing other than this but uses the same code… I can share the method if you like

4

Sorr I mean same code as for onViewportEnter and onViewportLeave

5

Hello Sami,
Thank you for your post…
Unfortunately I have made the same things and I am also blocked with only 2 sections.
But I will try to add conditions to the functions and check if an intermediate anchor is on screen or not before launching the scrolling.
I’ll keep you informed if it works

6

Hello Sliide, Thank you for your support. I actually dont know coding so it will be a great help if you figure out some solution for this.

Sami

7

Hi Sami,
I found this post https://www.wix.com/code/home/forum/questions-answers/scroll-mouse-down-or-scroll-mouse-up
I think it could be a good alternative to our problem. I’m going to try it.

BR,
Loïc

8

Hey, i know i’m late to the party but i was just trying to find a solution for this today and using this code i managed to make this work on multiple pages or sections. Here’s the code i’m using on my own page it’s really rudimentary but works. To add pages or sections just copy and paste the code, change the anchorpoint names and the variable name.

//page 1 to page 2

var scrlock = 0

//scrolls to page 2
export function toworks_viewportLeave() {
$w(“#workdesign”).scrollTo();
}
//when coming back up to page 1 ‘closes’ the scrolling lock
export function toworks_viewportEnter(event) {
scrlock = 0
}

//if scroll lock is ‘open (=10)’ scroll to page 1 else open the scroll lock
export function bactotop_viewportEnter() {
if (scrlock === 10) {
$w(“#homeanchor”).scrollTo();
} else {
scrlock= 10
}

}

//page 2 to 3

var scrlocktwo = 0

//scrolls to page 3
export function toworkdesign_viewportLeave() {
$w(“#workbranding”).scrollTo();
}
//when coming back up to page 2 ‘closes’ the scrolling lock
export function toworkdesign_viewportEnter(event) {
scrlocktwo = 0
}

//if scroll lock is ‘open (=10)’ scroll to the page 2 else open the scroll lock
export function backtoworkdesign_viewportEnter() {
if (scrlocktwo === 10) {
$w(“#workdesign”).scrollTo();
} else {
scrlocktwo= 10
}

}

9

great! Ill try it!

10

Great, thanks for the efforts, Ill try it and let you know!

11

Allright so now that i’ve implemented it to a longer site i can say that this works but it’s buggy as hell. I’ll continue trying to find a better solution for this and if i do ill let you know. It’s really hard because it seems that wix really doesn’t care about people who want full customization via code.

12

You can check out beoncreative.com for what the current solution looks like.

13

also i had to tweak the code and here’s the updated one ignore the notes i had to add another variable to help when having multiple sections. This has really just been fixing 1 thing and breaking 2 things.

var lock2 = 0
var lock3 = 0
var lock4 = 0
var lock5 = 0

//page home to design

var scrlock = 0

//scrolls to page 2
export function toworks_viewportLeave() {
$w(“#workdesign”).scrollTo();
}
//when coming back up ‘closes’ the scrolling lock
export function toworks_viewportEnter(event) {
scrlock = 0
}

//if scroll lock is ‘open (=10)’ scroll to the top else open the scroll lock
export function bactotop_viewportEnter() {
if (lock2 === 0) {
lock2 =1
} else {lock2 = 0
}

if (scrlock === 10) {
$w(“#homeanchor”).scrollTo();
} else {
scrlock= 10

}

}
//page design to branding

var scrlocktwo = 0

//scrolls to page 3
export function toworkbranding_viewportLeave() {
if (lock2 === 1) {
$w(“#workbranding”).scrollTo();
}

}
//when coming back up to page 2 ‘closes’ the scrolling lock
export function toworkbranding_viewportEnter() {
scrlocktwo = 0
}

//if scroll lock is ‘open (=10)’ scroll to the page 2 else open the scroll lock
export function backtoworkdesign_viewportEnter() {
if (lock3 === 0) {
lock3 =1
} else {lock3 = 0
}

if (scrlocktwo === 10) {
$w(“#workdesign”).scrollTo();
} else {
scrlocktwo= 10
}

}

14

You’re all running into the same issue here. The event is being triggered when some element enters the viewport…but the size of the viewport depends on device, resolution, browser, zoom setting; and in order to get your code working this way, you would need days of testing across devices and adding a whole bunch of variables and calculations to account for all of these cases.

The real solution is to change which event triggers the scroll action. I’ll work on a quick tutorial for this and link it here when it’s ready.

15

Right! If you find a solution that would be amazing. The best way i could come up with would be to detect if the user is scrolling up or down and have that as a trigger but this is not supported by wix despite it being requested for years. I really don’t thing there’s an elegant solution for this since the trigger has to be an on screen element as far as i know. The best possible solution i can come up with would be to use as an example twice the size strips and have everything pinned so that when you move from section to another the trigger collapses/shows the right elements but this just seems like a lot of work.

16

@jarkko I did manage to get it working with some creative functions, but it’s unfortunately just a massive memory muncher, making it pretty unstable.

I opted to just optimize your way instead, and I’ll post it soon.

17

Hi, I want to try this function but i dont even know how to enter code on wix… haha can someone explain it to me like i was a 5 year old?

18

@wingcc Please note that according to the Corvid Community Guidelines , it is not permitted to advertise of solicit on the forum. Your comment will be deleted.

Check out the Wix Marketplace - it’s a place where you can look for Corvid experts for hire.

19

A new tutorial has been published! It allows you to add as many sections as you want.

Check out the tutorial video and code files here .