Page scrolling is getting stuck when setting overflow hidden to body

Design help General
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

1 Like
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

image
image1276×190 22.5 KB

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

1 Like
9

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.

10

For all that want to know why:

Setting a width of 100vw will behavior “weirdly” when your page’s y-axis creates a scrollbar because the width is already the entire width of your screen + the new y-axis scrollbar that is not “on top of” the page but inside of it.

You can change this somewhat as of 2021 with
scrollbar-gutter: stable

Example:

11

thank you! worked for me