Android :: Webview удаляет полосу прокрутки для DIV

Question

Я сделал небольшую веб-страницу с прокручиваемым div. Когда я загружаю его в браузере, он работает нормально. Но когда я загружаю его в webview внутри Android, он не позволяет мне прокручивать div. Есть ли обходной путь для этого или я должен использовать другой дизайн? Я говорю о таких сайтах, как this.

Answer 1

Несчастливо, прокручиваемые div просто не поддерживаются в большинстве современных браузеров Webkit. Отличная альтернатива встроенной поддержки является библиотекой iScroll Javascript, который может имитировать реальную скроллинг:

http://cubiq.org/iscroll

копировать/вставить из описания проекта на этой странице:

переливной: прокручивать для мобильных устройств WebKit. Проект запущен, потому что webkit для iPhone не предоставляет собственный способ прокрутки содержимого в пределах определенного размера (ширины/высоты) div. Таким образом, в принципе невозможно было иметь фиксированный верхний/нижний колонтитул и прокручивающую центральную область. До сих пор.

Версия 3.3 и выше поддержка Android> = 1.5.

Answer 2

Update (как это один из результатов п ° 1 поиска на «WebKit скроллинга андроида»):
overflow:scroll поддерживается в Android от Honeycomb я считаю. Разумеется, v 3.2+ и кросс-платформу также в iOS5 + и в BlackBerry Playbook.
Я не тестировал его с веб-просмотром, в частности, но я предполагаю, что, поскольку он поддерживается в родном браузере, он также должен поддерживаться в веб-просмотре.

Answer 3

Вы можете использовать псевдоэлементы webkit для настройки стиля полосы прокрутки.

Попробуйте это:

::-webkit-scrollbar { 
    width: 12px; 
}  

::-webkit-scrollbar-track { 
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 
    -webkit-border-radius: 10px; 
    border-radius: 10px; 
}  

::-webkit-scrollbar-thumb { 
    -webkit-border-radius: 10px; 
    border-radius: 10px; 
    background: rgba(255,0,0,0.8); 
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 
} 

::-webkit-scrollbar-thumb:window-inactive { 
    background: rgba(255,0,0,0.4); 
}