Статически расположенная панель управления, такая как веб-приложение Gmail для iPhone?

Question

При просмотре Gmail с iPhone он настроен таким образом, что в верхней части экрана находится статически расположенная панель управления. Даже если вы прокручиваете страницу вверх и вниз, она не перемещается. Мне любопытно, если кто-нибудь знает, как они это настроили.

Насколько я слышал в прошлом, невозможно создать фиксированные элементы управления с помощью CSS в iPhone Safari. Вместо этого это должно быть что-то, что вы взламываете вместе с Javascript. Работают ли такие же методы для браузера Android?

Идеи? Мысли? Спасибо.

Answer 1

Как правило, это работает путем переопределения сенсорных обработчиков JavaScript для предотвращения механизма прокрутки по умолчанию на веб-странице.Затем внутри обработчика касания вы вручную вычисляете физику касания и размещаете контент в JavaScript.

• Поскольку вы спрашивали о реализации Gmail, стоит отметить, что команда Gmail опубликовала здесь о своей реализации : http://code.google.com/mobile/articles/webapp_fixed_ui.html
• iScroll, о котором упоминали другие авторы, является, вероятно, самой известной реализацией с открытым исходным кодом: http://cubiq.org/iscroll
• Собственная реализация Apple этого называется PastryKit, ноплохо документированы и не имеют открытого источника: http://daringfireball.net/2009/12/pastrykit

Обновление: я просто перечитал вопрос и заметил, что вы спрашиваете об Android (черт!).Похоже, в Android 2.2 добавлена ​​поддержка CSS: http://kentbrewster.com/android-scroller/

Answer 2

Я не очень знаком с разработкой веб-приложений для iOS, но iScroll выглядит многообещающе.

Answer 3

Это просто простой стиль CSS:

.className{
position:fixed;
}

Вы правы в том, что position:fixed; не работает в Mobile Safari, но я считаю, что это работает в Android.

Здесьэто тот сценарий, о котором вы говорили, чтобы он работал в мобильном Safari:

http://cubiq.org/scrolling-div-on-iphone-ipod-touch