HTML5 in der mobilen Webentwickung - Apps mit HTML5 und CSS3: Fur iPad, iPhone und Android - page 54

Abbildung 2.19 Die feststehende Kopfzeile in Ihrer WebApp
Scrollen wie in einer herkömmlichen App
In herkömmlichen iOS-Apps ist das Scrollen mit dem Finger stets begleitet vom soge-
nannten Gummibandeffekt am Ende des zu scrollenden Bereichs. Das heißt, wenn
das Ende des Elements erreicht ist, wird die Scrollanimation fortgesetzt, nur um kurz
darauf wieder zurückzuschnellen. Dieses Verhalten wurde bislang innerhalb eines
HTML-Dokuments nicht ausreichend unterstützt. Der komplette Bereich eines
HTML-Dokuments unterlag schon immer diesem Prinzip, aber nehmen wir an, Sie
möchten in einer zusätzlichen Box neben dem Text die wichtigsten Fakten von
Sharky zusammenfassen. Diese Box soll aber nicht den kompletten Bildschirm aus-
füllen und trotzdem scrollbar sein. Bisher war dies nur unter Einsatz von JavaScript
möglich, was die Performance um ein Vielfaches verschlechtert hat. Durch die neue,
iOS 5-spezifische CSS-Eigenschaft -webkit-overflow-scrolling können Sie Elementen
das für iOS-Benutzer natürlich wirkende Scrollverhalten zuweisen.
Also, los geht's, Ihre WebApp braucht eine kleine Box mit Sharky's Lebensetappen.
Erstellen Sie dazu direkt vor dem zweiten Textblock (vor der Überschrift »Sharky, der
Jaguarhai«) einen div -Container mit einer Klasse namens fakten .
<div class="fakten">
<p>Fakten rund um Sharky:</p>
Sharky wurde 2012 an einem Sonntagmorgen geboren.
Um sich fit zu halten, schwimmt er täglich 3,5 Km.
Die Pfleger putzen ihm jeden Tag mit einer speziellen Hai-Zahnpasta die
Zähne. So bleibt sein Gebiss kräftig und gesund.
Jaguarhaie kommen bereits sehr früh in eine Art Pubertät, weswegen er
bereits jetzt im Großraumbecken sein Revier markiert.
</div>
Listing 2.10 Sharky's Fakten in einem Kasten