Streaming live at 10am (PST)

How to eliminate Overflow on horizontal scrolling site

Hi, I am working on a site. It’s not nearly done, but I am doing the horizontal scrolling. And I am wondering how do I get the page from scrolling horizontally all over? Is it an overflow setting? I can’t pinpoint where to apply the setting. Anybody? :slight_smile:


Here is my site Read-Only: https://preview.webflow.com/preview/ds-nettside?preview=872920527dfac24c14723508793ba535
(how to share your site Read-Only link)

http://ds-nettside.webflow.io/

Hi @Stig_Ark, thanks for the question. I am not sure if I understand fully, is the objective to disable the horizontal scrolling section?

No. Maybe i am not explaining it well. I want it to scroll horizontally in the horizontal section. But the whole webpage scrolls horizontally when I scroll with my mouse. like on every section it scrolls to white space.

No ,i mean at every section, this is what i see in chrome on the first section when i scroll to the side. :stuck_out_tongue:

:

Hi @Stig_Ark, normally to hide the overflow, you would apply overflow:hidden to the parent element of the element causing the overflow, in this case your wrapper class with a 500vw width

I would probably nest the wrapper div that is 500vw within another div, and make the parent div have a style of overflow hidden. That will solve the overflow.

You may need to check your other section styling after making the overflow change.

The alternative is to remove the 500vw - or - change the layout structure and use a different horizontal scrolling technique (a lot is possible when using absolute or fixed position elements with scroll progress interactions).

Thank you so much. Do you have a link to a tutorial or lesson to some other horizontal scrolling techniques that will work better?

Hi @Stig_Ark, I don’t think you are too far off with the existing design, take a peek here: https://webflow.com/blog/creating-horizontal-scrolling

I did not think so myself. But i got a little bit blind now :stuck_out_tongue_winking_eye:

Hi @Stig_Ark, look at step one of the tutorial link I sent, it talks about the div that need to be set to overflow hidden, I think that is the missing link :slight_smile: Interactions are like legos.

I have followed the steps as it says. I still have the trouble that the page scrolls horizontally on the other sections too. What I am doing wrong? I am new to this horizontal scrolling. and csant figure out the settings for the rest of the site.

This topic was automatically closed 125 days after the last reply. New replies are no longer allowed.