-webkit-overflow-scrolling: касание вызывает проблемы с вертикальной прокруткой на мобильных устройствах.

Я занимаюсь созданием адаптивного мобильного сайта. При тестировании на своем телефоне я заметил, что не могу прокручивать по вертикали то, что можно прокручивать по горизонтали.

Вот пример того, что я имею в виду (извините, вы не видите горизонтальную прокрутку на своем телефоне, но просто поверьте мне, что она работает).

Мобильные браузеры Webkit не могут прокручивать таблицу в этом примере: http://jsfiddle.net/tArEy/

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

-webkit-overflow-scrolling: touch;

Мобильные браузеры Webkit могут прокручивать таблицу в этом примере, но это немного более глючно. http://jsfiddle.net/tArEy/1/

Кто-нибудь знает, как это исправить, используя только CSS?

Демонстрации должны быть протестированы в браузере. (Я использую браузер Chrome на Android. Я предполагаю, что у iPhone такая же проблема).

Изменить:

Оказывается, горизонтальная прокрутка ужасно глючит в мобильных браузерах webkit без следующей строки в вашем CSS:

-webkit-overflow-scrolling: touch;

Однако эта строка делает невозможным прокрутку по вертикали, поэтому я как бы стою на месте. Другие браузеры, не поддерживающие WebKit, прекрасно прокручиваются по горизонтали.

Редактировать 2:

В руки попал айфон. прокрутка переполнения аппаратно ускорена и работает безупречно. Похоже, проблема связана только с Chrome для Android.


person Billy McKee    schedule 24.03.2013    source источник


Ответы (2)


Это была ошибка только в Chrome для Android. Это было исправлено в недавнем обновлении.

person Billy McKee    schedule 09.05.2013

это может помочь решить проблему: http://filamentgroup.github.com/Overthrow/ переполнение-прокрутка поддерживается только в новых телефонах. когда я тестировал, я видел, есть ли у новых телефонов небольшие проблемы с прокруткой, поддерживающие Android 2.x и ios4, заставят вас плакать.

если вы прокручиваете по горизонтали, возможно, вы захотите переосмыслить свой дизайн.

person Jesse    schedule 25.03.2013
comment
Спасибо за ссылку, выглядит интересно. Я мог бы попытаться изменить его, чтобы избавиться от некоторых функций, которые мне не нужны. - person Billy McKee; 25.03.2013
comment
(вовремя не отредактировал) Мне нужно горизонтально прокручивать только одну страницу. У меня есть таблица, полная полезной информации. Единственный хороший адаптивный дизайн таблицы, который я видел, это http://www.zurb.com/playground/playground/responsive-tables/index.html. Как видите, это включает в себя горизонтальную прокрутку. - person Billy McKee; 26.03.2013
comment
Тогда вам стоит попробовать Zurb. Вот описание этого: zurb.com/playground/responsive-tables - person Jesse; 05.04.2013