Horizontal scroll combined with snap scrolling

Design help General
1

I made this portfolio design using interactions, but the scrolling looks all wrong and I’m not sure how to fix it.

Ideally, would love something like this. Or just anything that would make the sections appear in their entirety and not randomly cut like they are now. (apologies for not using the right terms)

Here is my site Read-Only: LINK
(how to share your site Read-Only link)

1 Like
2

Hi there,

Section scrolling issues can occur when using lazy-loaded images since browsers calculate height during initial page load. Here are two solutions to resolve this:

  1. Set your images to Eager: loads with page
  2. Place your images as children within fixed-height elements

For sections that need to span the full viewport height, you can use viewport height (vh) units - setting 100vh will make the section fill 100% of the viewport height.

Hopefully this helps! If you still need assistance, please reply here so somebody from the community can help.

1 Like
3

unfortunately, It did not help. Still looking for a neat snap scroll solution.

1 Like
4

Hey @yyaelbensi ,

Have you checked this guide out for configuring horizontal scroll?

It has a tutorial which shows setting the relevant structure and interactions to achieve that effect.

Hope this helps.

1 Like
5

My horizontal scroll works perfect. Maybe I’m asking for something convoluted but I would love to use snap scrolling in addition. Like this: Speaking - Gabrielle Dolan

1 Like
6

@yyaelbensi, I was testing the live site out and it seems the horizontal scroll is not rendering as it is in the reference site you shared.

The guide should likely help in creating frames so that when a user scrolls each section slides to the screen in a horizontal fashion as you would want it to.

1 Like
7

that is because I am working on it, trying a custom code with scroll-snap-type. It should work now.

I am looking at this tutorial but can’t translate it to my layout successfully.

1 Like