mardi 25 août 2015

iPhone inertial scrolling under overflow scroll menu

I have a scrollable menu (UL) with:

position: fixed;
overflow: scroll;
-webkit-overflow-scrolling:touch;

When the menu opens, a class applies to the HTML and Body elements setting:

height: 100%;
overflow: hidden;
position: relative;

When the menu is scrolled to the bottom, if you continue to scroll - the inertial scrolling (rubber band effect) on the page in the background kicks in and focus on the menu is lost. Scrolling up only causes the opposite inertial affect and doesn't move the menu. I need to wait until the page in the background moves back to it's location before I can control the menu again.

I have tried setting position fixed on the Body when the menu opens but this just holds it still while loosing focus on the menu, I still have to wait a couple of seconds for the inertial scroll to reset before I can scroll the menu.

Any advice welcome.




Aucun commentaire:

Enregistrer un commentaire