New Feature alert: Scroll Snap!

Be in the know
,
1

You can now have your items in the Repeater and the Layouter Slider layouts snapping to a specific position as your site users scroll through them.

About
With Scroll Snap enabled, scrolling through the Slider layout is not continuous, but will instead have the items snap to position as they are scrolled.

Without scroll snap:

https://static.wixstatic.com/media/a27d24_aa3a9e7300c64f68971b28b944300db2~mv2.gif(image larger than 4 MB)

With scroll snap:

https://static.wixstatic.com/media/a27d24_17721f0c16e44453abdb5bc232d6338f~mv2.gif(image larger than 4 MB)

What’s it good for?
Items will always reach a set position as users scroll through them, making sure they are always in the desired in viewport, and ready for your users to see them in full and as intended.

How
Select the Slider layout of the Repeater of the Layouter, and toggle on the option of Scroll Snap. Next, select where you want your items to snap to - the start, center or end of the Repeater/Layouter container.

Happy creating! And don’t forget to let us know how you used this feature :slight_smile:

12 Likes
2

Nice! Will be cool to have this feature for snap to sections also. Like you set the section hieght to 100vh and each section snaps as you scroll in a smooth way.

also please add the 2 column layout for the store on phone view :frowning: really really need it.

1 Like
3

I have requested this as well! I basically figured they could do this by creating a “snap” feature for anchors. You set the anchor - choose snap - and the page will scroll through sections with just one scroll or swipe (for mobile). This would be incredible when wanting to create a “full feature” or “one page” website. Can’t wait to see this feature!

1 Like
4

@travislbateman @nived2033 I guess you guys are talking about the scroll snap in the Tesla website. Right? ( www.tesla.com ) It’s pretty cool. I’d love to have it in EditorX!

5

Hey there, sorry if I’ve came late to this post. This feature seems great!

Though I have still some remaining doubts on how to hide the vertical general site’s overflow bar (at the right of the browser’s viewport by default) and how to force horizontal scroll with the mouse middle scroll; if you have some advances or alerts on these matters I’d be glad to hear about it.

Btw searched already in this forum and Corvid’s with not much success :

6

Actually more a scroll snap like the Zara website https://www.zara.com/
Hopefully with a function to change header font color from section to section. This is what I hope for.

7

Im 100% with this too! I ideally one scroll of the mouse wheel will snap them to the next 100vh section.

8

Hi. Would like to add Scoll snap between sections to the wish list.

9

Hey,
You can do it with Velo.
All you need is when a certain section enters the screen > scroll to it (like Anchor).

$w("#your_section_id").onViewportEnter( (event) => {
  $w("#your_section_id").scrollTo();
});

API:
onViewportEnter ,
Scroll To

10

just here again to reiterate #featurerequest #scrollsnap #sections

Would love to be able to scroll snap sections just like a layouter. Actually I’m building a site right now that I’d love to essentially be able create the same function as www.tesla.com does. Although I have a feeling this ultimately just requires approaching the way I build a site differently?

Like I guess the you could build each 100vh x100vw “section” of a site as a container instead. Then add and stretch the containers to a 100vh x 100vw item in a layouter? Then maybe we can use scroll snap functionality?

I’ll have to test this.

11

+1 for vertical scroll snap, just like Tesla and Rolls Royce sites.

12

@md60th this worked when scrolling down, but did not work when scrolling back up.

13

+1