overflow:hidden not working with translation in positive direction
So I've been working with something similar all day and realized that while I had
html, body {overflow:hidden; }
...if I add position:absolute
, position:relative
or position:fixed
to the html and body, it fixes the issue.
I wrap everything in a container div with the following code. Explicitly set overflow appropriately in both directions. This keeps the X-axis from scrolling in iOS Safari, even if there are elements translated to the right of the main content area.
But scrolling performance is significantly degraded unless you add -webkit-overflow-scrolling: touch;
. It took me a long time to find this! Hopefully it helps someone else.
.scrollContainer {
position: absolute;
width: 100%;
height: 100%;
overflow-y: scroll;
overflow-x: hidden;
-webkit-overflow-scrolling: touch;
}