Problem with horizontal scrolling/ overflow hidden

Design help Animations & Interactions
1

Hello everyone!
I’ve run into an issue with horizontal scrolling. I followed Webflow tutorials to set it up, and everything worked perfectly at first. However, at some point, the scrolling started behaving differently, even though all the settings remain exactly the same.

The camera (block of the visible area) no longer hides the track as expected, even with overflow set to hidden.

I’d really appreciate any help figuring out what’s going wrong. Thank you in advance for any help!

qq1_2

Here is my public share link:(Webflow - Comfort Zone) open projects → any project
(how to access public share link)

2

Hi there!

To fix the horizontal scrolling issue with your camera div block, you’ll need to adjust the overflow settings. When elements extend beyond their container’s boundaries, they can cause unwanted scrolling. Here’s how to resolve this:

  1. Select the “Camera” div block
  2. Navigate to the Style panel and find the Size section
  3. Look for the Overflow setting
  4. Set both Overflow-X and Overflow-Y to “Hidden”

If horizontal scrolling persists, check these common causes:

  • Elements with absolute positioning that extend beyond the div
  • Margins or padding pushing content outside the container
  • Child elements with width settings exceeding 100%

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

3

Thanks for the reply, but unfortunately none of this solved the problem :(

4

Hey @Nadzeya_Bachyla ,

Can you try doing the following:

  • Remove Width and Overflow settings from ‘body page’ element. Just keep the position set as it is currently.
  • Set the width and height properties of ‘track’ in the styling and interaction consistent as per the logic shared here.
  • I noticed different heights of it in track and interaction which does not follow the calculation which is causing extra space and unexpected scrolling behavior.

I applied the changes and followed the guide in the preview link and am sharing the difference accordingly.

Before:
AJ - Before - Comfort Zone - gif

After the changes:
AJ - After - Comfort Zone - gif

So the key is to maintain consistency in the calculation of vw and vh, I noticed some width to be 70vw, 140vw and then -40vw for interaction which might not work in that case. Feel free to explore different widths if your images require it for the ratio, but make sure the other widths are also adapted for this.

I referred this cloneable from webflow for double-checking the settings.

You can check that out or clone something like this and customize it for your use-case.

Hope this gives you some idea.

5

Yes, it solved the problem. Thank you very much!! :blush:

1 Like