iPhone-подобная полоса прокрутки jQuery

Question

Я пытаюсь найти полосу прокрутки jQuery, которая выглядит как у iPhone: простая черная полоса без кнопок вверх или вниз. Я нашел несколько сценариев, но большинство, как правило, делают гораздо больше, чем мне нужно. У меня в основном есть div с фиксированной высотой, установленной на overflow:auto, к которой я хотел бы применить эту полосу прокрутки. Помощь будет принята с благодарностью!

Answer 1

Маттео Спинелли имеет iPhone-подобную полосу прокрутки внутри своей iScroll библиотеки.Вы должны попытаться выяснить, можете ли вы принять его для своих нужд.

Answer 2

Каковы ваши требования к браузеру?

Вы должны стараться избегать JavaScript-решений, так как они увеличат сложность вашей страницы.Если сторонняя библиотека javascript с полосой прокрутки ломается, вам придется отлаживать ее самостоятельно (уже там, сделали это).

Chrome полностью поддерживает CSS3 полосы прокрутки, что-то вроде этого должно сделать iPhone подобной полосе прокрутки

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

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

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

IE позволяет стилизовать полосы прокрутки с помощью тегов, определенных поставщиком, но он очень ограничен.Например:

scrollbar-base-color: #663366; 
scrollbar-face-color: #99CCCC; 
scrollbar-track-color: #996699; 
scrollbar-arrow-color: #330033;
scrollbar-highlight-color: #FFFFFF; 
scrollbar-3dlight-color: #CCCCCC; 
scrollbar-shadow-color: #663366;
scrollbar-darkshadow-color: #000000;

Вот jsFiddle со стилизованными полосами прокрутки: http://jsfiddle.net/APmLZ/3/