To ensure full compatibility, I implemented a "hack" for older iOS devices by fixing the position of my page body. This prevents elements from scrolling and provides a solution to keep multiple page elements fixed on the screen of those devices.
I created a div that is meant to be scrollable. Only this div should have the ability to scroll, even on older iOS devices. However, it does not work as intended. When attempting to scroll, the body, which is fixed, scrolls instead of the scrollable element.
I set up an example that should allow scrolling down to number 23. However, it still does not scroll at all on older iOS devices. Despite making several adjustments that should facilitate scrolling, it remains unsuccessful on these devices.
What am I doing wrong?
body{
width:100%;
height:100%;
text-align:center;
position:fixed;
}
.contentwrap {
overflow-y:scroll;
-webkit-overflow-scrolling:touch;
position: static;
width:100%;
height:100%;
}
<ul id="menu">
<li><a href="#page 1">Section 1</a>
<span><a href="#page 2">Section 1A</a></span>
<span><a href="#page 3">Section 1B</a></span>
<span><a href="#page 4">Section 1C</a></span>
</li>
<li><a href="#page 5">Section 5</a></li>
</ul>
<div class="contentwrap">1 <br> 2 <br> 3 <br> 4 <br> 5 <br> 6 <br> 7 etc...</div>
Complete codes to number 23: