Загрузочная таблица, не прокручивающаяся вертикально на устройствах iOS

Это то, что у меня есть:

<div class="table-responsive">
    <table class="table" style="background: transparent">
        ....
    </table>
</div>

Я использую следующий файл bootstrap.css: http://netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css

Когда я пытаюсь прокручивать вверх и вниз на устройстве iOS (пока мой палец касается таблицы), он не прокручивается. Он просто тянет всю страницу вверх и вниз. Мне нужно коснуться фона тела или любого другого объекта, кроме таблицы, для прокрутки. Эта проблема не возникает на устройствах Android, но, похоже, она присутствует на устройствах iOS, таких как iPhone.

Я попытался добавить overflow-y: auto в <div class="table-responsive">, но он все еще не работал.

Что мне нужно добавить, чтобы включить прокрутку на мобильных устройствах (устройства Apple, в частности)?

Ответ 1

Для всех, у кого есть эта проблема, все, что я должен был сделать, чтобы решить проблему, заключалось в том, чтобы добавить следующую строку в класс класса table-responsive:

-webkit-overflow-scrolling: touch;

И теперь он работает так, как ожидалось.

Ответ 2

У меня была такая же проблема, после чего я удалил overflow: hidden; из html и body. Поведение Safari в IOS соответствовало поведению Chrome на Android, т.е. Страница снова прокручивалась по вертикали. Проверьте и посмотрите, имеет ли родительский элемент .table-responseive overflow-hidden и попробуйте прокомментировать его.

Я все еще ищу лучшее решение, которое не заставит меня изменить CSS родительских элементов.

[EDIT]

Нашел. Вам не нужно изменять значение переполнения родительского элемента .table-responsive, просто убедитесь, что вы добавили

parent {
    overflow-y: scroll; /* has to be scroll, not auto */
    -webkit-overflow-scrolling: touch;
}

Ответ 3

Это позволяет делать таблицы только горизонтально. Вертикальная прокрутка с таблицами не является исключением из бутстрапа Twitter.

Ознакомьтесь с их документацией для получения дополнительной информации: Ревизионные таблицы под вкладкой CSS

Источник: http://getbootstrap.com/css/#tables