Position:fixed solves IOS overflow:scroll issue but causes body to jump to top?

Question

I have a class js-drawer-open that gets applied to the body & html when a drawer is triggered to open.

.js-drawer-open {
    overflow: hidden;
}

This works perfectly on desktop to prevent content outside the drawer from scrolling when the drawer is open. However on IOS this doesn't work as the element inside the body are position:absolute. The only way I could get it to work was with the following...

.js-drawer-open {
    height: 100%;
    overflow: hidden;
    width: 100%;
    position: fixed;
}

But now my issue is if you scroll down the page and then open the drawer the page jumps back to the top of the screen which can be very frustrating for the user.

I think this is due to position: fixed being applied and I wanted to know if there is any way around this?

Any help would be much appreciated.

Thanks for your suggestion but that seems to do the same thing. — user2498890, Jul 24 '15 at 12:38
It's quite complex but i could try to simplify it for a fiddle if you bare with me. — user2498890, Jul 24 '15 at 12:40
Hmm, maybe adding a `padding-top` corresponding with the height of the fixed element? — Jeroen Bellemans, Jul 24 '15 at 12:49
Really struggling to get the jsFiddle to work, does anyone have any suggestions I could try without putting this together. I essentially need it to stay in the same position when the drawer is opened. — user2498890, Jul 24 '15 at 13:03

score 0 · Answer 1 · edited May 23 '17 at 11:44

0

Maybe I'm missing something as you don't have a fiddle, but it sounds like your click event causes the jump to the top of your page. Take a look at: How to prevent a click on a '#' link from jumping to top of page in jQuery

edited May 23 '17 at 11:44

Community

1
1

answered Jul 24 '15 at 13:23

Wessel van der Weide

44
2

Thanks for you answer, the trigger to open the drawer is a button ` – user2498890 Jul 24 '15 at 13:41
I can include the js I'm using. It's actually from the Shopify Timber js as thats what Im using to build a theme. As I'm not great with js this may be where I'm going wrong? – user2498890 Jul 24 '15 at 13:45

Position:fixed solves IOS overflow:scroll issue but causes body to jump to top?

1 Answers1