Ошибка браузера Android? div переполнение прокрутки

Question

Можете ли вы сделать содержимое переполнения div прокручиваемым в браузере Android?

Это прокручивается во всех других современных браузерах.

В iOS это прокручиваемый - однако он не показывает полосы прокрутки - но это прокручиваемый посредством перетаскивания.

Простой пример: http://jsfiddle.net/KPuW5/1/embedded/result/

Это будет исправлено в ближайшее время?

Answer 1

Android 3.0 и выше имеют поддержку overflow:scroll, на < 3.0 это другая история. Вы можете добиться успеха с полифиллами, такими как iScroll, однако это обходится дорого. Это сложно реализовать на сайтах со сложной компоновкой, и вам нужно вызывать метод каждый раз, когда меняется содержимое вашего сайта. Использование памяти также является проблемой: на устройствах с недостаточным питанием производительность может отставать из-за таких типов заполнения.

Я бы порекомендовал другой подход: используйте Modernizr для определения поддержки прокрутки переполнения, добавьте класс к вашему html отметьте и используйте это, чтобы переписать ваш CSS, чтобы страницы прокручивались "нормально", а не в поле.

/* For browsers that support overflow scrolling */
#div {
    height: 400px;
    overflow: auto;
}

/* And for browsers that don't */
html.no-overflowscrolling #div {
    height: auto;
}

Answer 2

overflow: scroll; поддерживается с Android 3 (API 11).

Для кроссплатформенного (а именно iOS <= 4.3.2) Cubiq iScroll - это простое в реализации исправление.

Answer 3

Вы можете попробовать touchscoll.js для прокручиваемых элементов div

Answer 4

Просто для полноты:

Полосы прокрутки на самом деле есть в Android 2.3, но они очень глючные, и по умолчанию они имеют нулевую ширину, поэтому они невидимы.

Вы можете сделать их видимыми, добавив стили, как:

::-webkit-scrollbar {
    width: 30px;
}
::-webkit-scrollbar-track {
    background-color: $lightestgrey;
}
::-webkit-scrollbar-thumb {
    background-color: $lightgrey;
}

Тем не менее, элемент большого пальца не перетаскивается, вы можете только переместить его, нажав дорожку под или над ним.

Кроме того, эти стили изменят внешний вид ваших полос прокрутки во всех браузерах webkit, поэтому лучше всего добавить класс, который применим только к Android 2.3.

Answer 5

Вы можете сделать DIV-прокрутку в Android, определив стили полосы прокрутки в вашем CSS. Эта статья покажет вам, как это сделать: http://css-tricks.com/custom-scrollbars-in-webkit/