Horizontal Interaction Causes Horizontal Scroll Bar Issue

Hi,

I have created a horizontal scroll section based on the Webflow tutorial (link here).

The interaction works fine on the desktop view as expected. But it causes a horizontal scroll bar.
Please see below image:

I have checked the whole website and sure is this section causing the issue but I can’t find what is going wrong. Can anyone help?

Thank you so much in advance!


Here is my public share link: Webflow - HUGO NGAI

Hi @Hugo0301NN,

Welcome to the forum!

You could try using the following code snippet in Page Settings > Custom Code > Head Code:

<style>
::-webkit-scrollbar {
display: none;
}
</style>

This should remove the scrollbar (will remove the vertical scroll bar also).

More options here: How to Hide the Scrollbar in CSS

Hope this helps!

Hi @mww

Thank you so much for checking the issue.
Unfortunately, my plan doesn’t support Custom Code. I’m not able to fix it using this method.

Are there any other ways to fix it?

Thanks a lot,
Hugo

if the Body Overflow is set to Visible. You can’t see the horizontal scrollbar in the Designer.
But it appears on the live site (https://hugo-ngai.webflow.io/).

There is what I have tested and found:

  1. in order to identify which selection causes this issue.
  2. I have changed the Body Overflow from Visible to Scroll.
  3. Then scroll down to the bottom of the site, and the horizontal scrollbar appears.
  4. Deleted the “track” section, the horizontal scrollbar is gone.
  5. Looks like the “photo-items” causes this issue, but I don’t know how can I fix it.
  6. please attached image (issue-image-01-V2).

Thanks,
Hugo