Одновременная вверх/вниз - влево/вправо прокрутка не работает на Iphone

Question

Going умственная о том, что вещь: у меня есть следующая структура дивы:

<div class="main"> 
    <div class="container"> 
     <div class="column">   
      <div class="content"> 
       <div class="block"></div> (repeat 4 times) 
      </div> 
     </div> 
     <div class="column"> 
      <div class="content"> 
       <div class="block"></div> (repeat 4 times) 
      </div> 
     </div> 
     <div class="column"> 
      <div class="content"> 
       <div class="block"></div> (repeat 4 times) 
      </div> 
     </div> 
    </div> 
</div> 

CSS:

.main { 
    overflow-x: scroll; 
    width: 400px;   
} 

.block { 
    display: block; 
    width: 300px; 
    height: 80px; 
    background-color: blue; 
    margin: 5px; 
} 

.container { 
    width: 1000px; 
} 

.column { 
    float: left; 
    height: 300px; 
} 

.content { 
    height: 300px; 
    overflow: scroll; 
} 

Идея этого планируйте его, чтобы иметь один большой контейнер, прокручивая по горизонтали, который содержит меньшие контейнеры, которые прокручиваются по вертикали.

Проблема: несмотря на то, что он отлично работает на Android и настольных компьютерах, он не может заставить его работать на iphone с сафари (не может протестировать на Chrome для iOS, хотя и не имеет доступа к устройству). Вместо прокрутки контейнера iphone прокручивает всю страницу (попробуйте прокрутить влево-вправо, удерживая палец на синих прямоугольниках). Пожалуйста, см. this jsfiddle на iphone.

Я понял, что я прочитал stackoverflow и сам испытал, что он имеет какое-то отношение к css overflow, но все еще не может найти решение.

Любые идеи, пожалуйста?

Answer 1

Итак, снова необходимо было добавить -webkit-overflow-scrolling:touch; в нужное место. В данном случае это был самый верх main контейнер и избавиться от ненужных overflow свойств:

.main { 
    overflow-x: scroll; 
    width: 300px; 
    -webkit-overflow-scrolling:touch; 
} 

Проверено на эмуляторе, но похоже, работает в настоящее время. JSFiddle