Horizontal Interaction Causes Horizontal Scroll Bar Issue

[Hugo0301NN (Hugo Ngai)]

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

[mww (Milan)]

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: https://blog.hubspot.com/website/hide-scrollbar-css

Hope this helps!

[Hugo0301NN (Hugo Ngai)]

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

[Hugo0301NN (Hugo Ngai)]

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