Streaming live at 10am (PST)

Page scrolling is getting stuck when setting overflow hidden to body

As described in the header, I’m trying to set the overflow for the body, but then I loose the scrolling for the page.

Any suggestion of how to solve it?


The body overflow is visible (By default):
image

body {overflow: hidden;} = clipping+ no scroll (“hide overflow” + no scrollbars are provided).
image
This idea usefull when you want to prevent scrolling when modal/popup is open - example

overflow docs

Anyway, Add URL + read-only link + Tell what you trying to get (“I want to create a modal…popup…effect X or Y”)

Thanks Siton,
This is not for a modal/popup.
It’s a Div that goes beyond the page border edge.

The reason I need it to go beyond the (right) side border is because this div is triggering some interactions of underlying elements, and it has to be in this specific location,
however i would love to be able to set “Overflow hidden” for the Body, so this should prevent the page from scrolling horizontally

Here is my Read Only link:
Please check the second page, called “Doopels app”, the bottom of the page, the div covering the iPhone.
https://preview.webflow.com/preview/eli-shmerler?preview=00fe542a7d1fe8211732508d07d175d

Thanks for helping.

Hey @Eli11,

Did you manage to figure this out? I’m having a similar issue.

Hi Dan,
At the end I inserted the large div into another div that I made 100vw and overflow hidden. It solved my problem!
Here is a link to the fixed page

http://designeli.com/doppels-app

1 Like

First, all of those tricks did not react the same way in all browsers (Mobile/desktop) - you find a lot of stackOverflow Q about this topic (example).

This code should work fine (copy-paste before body per-page // entire site):

<!-- clip the content
when it overflows 
at the left and right edges -->
    <style>
        html, body {
            overflow-x: hidden;
            width: 100%;
        }
    </style>

overflow-x

@Eli11 in your site I see a horizontal scrolling - your solution not working well

1 Like

Thanks! I gonna try it

Now I understand your first Q more clearly :slight_smile:

  • overflow: hidden; hides both horizontal and vertical scrollbars.
  • overflow-x: hidden; hides horizontal scrollbars.
  • overflow-y: hidden; hides vertical scrollbars.

If you set overflow:hidden for the body you hide both scrollbars. (No overflox-x by webflow CSS UI (wishlist) - for now use custom code).

1 Like

Hi, sorry about reviving this so late. I was just looking for ways to hide my window scroll bar.
First of all, great job, I really liked your portfolio.
I can see that the horizontal scroll still there.
For sure using overflow-x is an option, but I think found another solution: I am not sure why you are using width: 100vw for the “iPhone div” but if you try width: 100% looks like it is still working and the x-scroll is gone.