Streaming live at 10am (PST)

How to eliminate Overflow on horizontal scrolling site


#1

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/


#2

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


#3

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.


#5

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:

:


#6

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).


#7

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


#8

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


#9

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


#10

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.


#11

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.


#12

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