Mobile: content div underneath fixed div captures scroll action?

Forum Moderators: not2easy

Message Too Old, No Replies

Mobile: content div underneath fixed div captures scroll action?

johnnie

2:16 pm on Nov 12, 2014 (gmt 0)

Hi all,

I have a responsive menu which expands upon click of the menu button. Fairly standard.

Since the menu is long enough to overflow the screen, I'm using a combination of position:fixed, z-index and overflow-y: scroll to make sure the menu can be made visible regardless of screen height etc.

What now happens though, is that when I open the menu and try to scroll down on iPhone (chrome), the underlying page scrolls down instead of the menu. It seems that the scroll focus is not properly assigned to the overlying menu div. I first have to tap the div and then scroll (and even then it behaves quite erratically), which is obviously not a great user experience.

Is there anything I can do other than ditching the fixed positioning and opening the menu at the top of the page?

johnnie

2:40 pm on Nov 12, 2014 (gmt 0)

Aaaand this is how it all too often goes.

I've worked around this problem by making sure the menu toggle button is inside the div that overflows. This way tapping the menu button automatically sets the focus on that div and enables the menu to scroll.

Ta-dah!

Sorry for a post that in retrospect seems like a thinking-out-loud but I hope having this in the archives will at least help somebody someday ;)

rainborick

2:47 pm on Nov 12, 2014 (gmt 0)

It's been a while since I looked into this, but apparently webkit-based browsers like Safari and Chrome - especially the mobile versions - have spotty support for position:fixed.

So, you should probably try changing to position:absolute - which you may find behaves much as you wanted position:fixed to do. Depending on your layout, you may find position:relative in conjunction with z-index works just as well for your toggle menu.

not2easy

3:54 pm on Nov 12, 2014 (gmt 0)

No need for an apology johnnie, happy to see your problem was resolved. It looks like we got more ideas to try too, thank you rainborick. Those were my thoughts as I read the original question, before I saw it was resolved while you were writing.

johnnie

6:54 am on Nov 13, 2014 (gmt 0)

Position:fixed keeps the element in view though.

Looks like my current approach works. Just got to make sure that the scroll focus is captured by the right element.