body overflow-x: hidden

[endze1t]

Greetings, if i'm adding to body overflow-x: hidden, the sticky box stop working. Without it's working like a charm.

The Sticky box is in a deep nested Flex Layout.

Any ideas?

[Daniel]

Hm. This is a bit hard to debug but maybe this one could work:

body {
  overflow-x: hidden;
  overflow-y: auto;
}

[endze1t]

Thanks for the response, but sadly no. The only way it works is with:

{ overflow-x: inherit; overflow-y: inherit; }

Tested with newest Safari/Chrome on Mac and Chrome on Windows.

[endze1t]

Looks like, i could make a reproducable example:
https://codesandbox.io/s/2wvk6vv1qp

It seems like, the header in fixed could may the issue.

[Daniel]

Ah I see! Thanks for the example.

Unfortunately there's no way to automatically do the "right" thing if there are fixed elements on the screen.

I see two options:

• either you specify an offsetTop prop to the stickyBox with an appropriate value
• or you create a sticky header like this: https://codesandbox.io/s/k05lp4n427

[endze1t]

We already using offsetTop because of the fixed header. But the issue is the same. But if we add manual overflow-x: hidden with chrome developer console it's working.

So maybe, before rendering the sticky box, remove all overflows in body first and after rendering is completed, add overflow-x again to the body. May this could work?

Edit:
This work, but this so dirty ... Added this to the component with the Sticky box.

    componentDidMount() {

        document.body.classList.remove('overflow');


        setTimeout(() => {
            document.body.classList.add('overflow');
        }, 500);

    }

 .overflow { overflow-x: hidden; }

I don't think this is good for production.

[Daniel]

Okay I just had a closer look and I think I understood the problem. Your code sample actually exposes some interesting bugs in react-sticky-box I haven't seen yet.

As a work-around can you maybe see if you can apply the overflow property not to body but a child element e.g. #root?

[endze1t]

It's not working on #root as well. But the the error behaviour is difference.

On body it's sticks fixed and on #root it sticks relative.

[Daniel]

Alright, I'm now trying to set up a test case containing your code. Let's see what I'll get out of it 🙂

[Daniel]

Cool, I think I found it!
If you update to version 0.7.6 the issue should be gone:
https://codesandbox.io/s/l5yn4o8o8q

[endze1t]

Great! I've updated it and added overflow-x: hidden again to body. Now it's working! Great Job. Solved 👍

[Marco Cianetti]

Hi there!

Here just to help others with my same problem.

I had:

html, body {
 ...
  overflow-x: hidden;
  overflow-y: auto;
}

And it wasn't working, so I ended up here by searching in the issues.

The problem was the html style; removing the overflow part from there, and leaving only to the body element made it working.

Maybe it could be useful to add it to the docs.

Hoping it helps 👋🏻