Is it possible to scroll down so that each section appears in its full? (example: https://www.tesla.com/)) If not with sections, is there a way to do it with containers or other elements?
2 Likes
Hey @shirilipinsky ,
You can get this effect by using the layouter tool.
-
Place a layouter & changed its layout to a slider.
-
Set the slider direction to vertical.
-
Turn on scroll snap & set align snap to the end.
-
Set all items hight to 100vh.
-
Use etch item for different sections
That’s awesome! Thank you so much
Hi @klarak ,
I tried using your method but it turns out that the scroll snap feature only works when the Slider Direction is set to Horizontal . Can you let me know how to make scroll snap work in the vertical direction? Thanks!
@pratham I have the same experience. Was there any solution for it released? I tried it with scrollto() function and it works quite ok but this way has issues if you want to use it with backtotop-anchors or simple upscroll to another sections or other anchors that are above those elements. Would be nice to have the snap on function working in vertical direction.
Hi @ shirilipinsky and @jv1
I’m Carmel from the Editor X team.
I set it up as follows:
- Place a layouter & change its layout to a slider.
- Set the slider direction to vertical.
- Turn on scroll snap & set item snap align to Start (center or end should work)
- Set every item Min-H 100%
- Set Layouter height to 100%
- Set section height to 100 vh
- Use each item as a section
I hope this works for you.
If not, would you mind sharing your editor url so we can take a look? If you prefer to share privately, I suggest opening a ticket through the ‘Help’ section in the top-bar of Editor X → ‘Send Feedback’, or ‘Report a Bug’
Thanks,
Carmel
@carmelsc I am seeing an issue on touchscreens (iPads & iPhones), where the next item is not sliding into view. Instead, the entire section is trying to scroll. See: brouwek.editorx.io/website/home-1