Streaming live at 10am (PST)

Page scrolling is getting stuck when setting overflow hidden to body


#1

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?



#2

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


#3

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.


#4

Hey @Eli11,

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


#5

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


#6

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


#7

Thanks! I gonna try it


#8

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