iOS: Тело фиксированное, прокрутка div. Как?

Question

Для полной совместимости и как «взломать» для устаревшие устройства iOS (на которых трудно добавить фиксированную верхнюю панель или фиксированное меню), я зафиксировал положение тела моей страницы (чтобы предотвратить прокрутку элементов) , который, кажется, является решением, чтобы сделать несколько элементов элемента страницы на экране на этих устройствах.

Я сделал div, который должен прокручиваться. Только тот div, который я хочу прокручивать, также на старых устройствах iOS. Но это не сработает. Когда я пытаюсь выполнить прокрутку, тело пытается прокрутить (фиксированный) вместо прокручиваемого элемента.

Я сделал пример, который должен прокручиваться до номера 23. Но на более раннем iOS он по-прежнему не прокручивается. Я сделал несколько вещей, которые делают его более вероятным, чтобы он прокручивался, но он не работает на более старых устройствах iOS.

Что я не так?

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> 

Полные коды к номеру 23:

https://jsfiddle.net/vf18x37n/

Answer 1

Try дает ту часть, которая позволяет ему прокручивать важно!. Таким образом, он переопределяет , что никогда не вызывает его прокрутку.

Пример:

#scroll { 
    overflow-y:scroll !important; 
    -webkit-overflow-scrolling:touch !important; 
}