iPhone Scrollbar entfernen

[mixmastertobsi]

Hallo,

ich versuche verzweifelt die vertikale Scrollbar zu entfernen, wenn das Menü geöffente wurde...

Im Browser funktioniert es problemlos, jedoch macht leider das iPhone Probleme.

Wer hat einen Tipp? Ich habe schon alles mögliche probiert...

um folgende Seite geht es...

m.slewo.com

[molily]

Hi!

ich versuche verzweifelt die vertikale Scrollbar zu entfernen, wenn das Menü geöffente wurde...

Meinst du vielleicht die horizontale Scrollbar?

Packe beide Elemente (Navigation und Hauptinhalt) in ein Element mit overflow: hidden. Dieses Element hat position: static und width: auto (beides musst du nicht angeben, es ist Standard). Damit ist es so breit wie der Viewport und schneidet den Hauptinhalt, den du rechts herausschiebst, ab.

Noch ein Performance-Tipp: Wenn du (-webkit)transform: translateX(…) verwendest anstatt left, bekommst du eine hardwarebeschleunigte, viel flüssigere Animation auf Mobilgeräten hin.

Mathias

[mixmastertobsi]

Hi Mathias,

danke für den Tipp - ich habe das nun mal mit transform probiert - im FF funktioniert es problemlos...auf dem iPhone geht leider gar nichts...an was liegt es?

Tobias

[mixmastertobsi]

Hi Mathias,

danke für den Tipp - ich habe das nun mal mit transform probiert - im FF funktioniert es problemlos...auf dem iPhone geht leider gar nichts...an was liegt es?

Tobias

OK - erledigt...

Zwei Fragen noch:

Warum geht denn bei transform position: fixed nicht?!?
Ich möchte, dass die Kopfleiste immer oben fixiviert ist?!?

Gibt es auch noch Hardware-Beschleuniger für Skalieren von Elementen?!? Wenn mann zum Beispiel nach unten scrollt, soll die Sichleiste kleiner werden, jedoch "ruckelt" dies auch einwenig.

Danke!

[molily]

Hallo,

Warum geht denn bei transform position: fixed nicht?

Das ist ein bekannter Bug, der auf auf Desktop-Browsern auftritt.

http://meyerweb.com/eric/thoughts/2011/09/12/un-fixing-fixed-elements-with-css-transforms/ legt nahe, dass das durchaus spezifiziertes Verhalten ist.

Ich möchte, dass die Kopfleiste immer oben fixiviert ist

Das kann sie auch, solange das Menü nicht geöffnet ist, sprich, solange transform nicht angewandt ist. Wenn das Menü geöffnet ist, scrollt der Nutzer ohnehin nicht auf der Seite.

Gibt es auch noch Hardware-Beschleuniger für Skalieren von Elementen?!? Wenn mann zum Beispiel nach unten scrollt, soll die Sichleiste kleiner werden, jedoch "ruckelt" dies auch einwenig.

Es gibt transform: scale() bzw. scaleY(), aber das würde das gesamte Element verkleinern bzw. stauchen, das willst du vermutlich nicht.

Ich sehe hier kein technisches, sondern ein konzeptionelles Problem. Entweder die Suchleiste ist so wichtig, dass sie immer gleich sichtbar sein sollte, oder sie kann beim Scrollen zugunsten eines Such-Buttons im Header ausgeblendet werden. Auf das Verkleinern beim Scrollen würde ich verzichten. Das ist ein aktueller Trend, den man hinterfragen sollte. Das funktioniert nur auf Desktop-Browsern und großen Viewports robust und performant, auf Mobile-Browsern und kleinen Viewports verwirrt es eher. Safari unter iOS 7 nutzt dieses Pattern bereits: Alle möglichen Bedienelemente werden beim Scrollen verkleinert und transformiert. Wenn die Website mit fixierten Elementen, die sich beim Scrolling transformieren, noch einen draufsetzt, wird die Seite nicht besser bedienbar.

Mathias

[mixmastertobsi]

Hallo,

Warum geht denn bei transform position: fixed nicht?

Das ist ein bekannter Bug, der auf auf Desktop-Browsern auftritt.

http://meyerweb.com/eric/thoughts/2011/09/12/un-fixing-fixed-elements-with-css-transforms/ legt nahe, dass das durchaus spezifiziertes Verhalten ist.

Hallo und Danke!

Das Problem tritt aber nicht nur auf dem Desktop auf, sondern auch auf meinem iPhone, mit welchem ich es teste - oder wird der Head-Bereich bei Dir fixiert?!?

[bubble]

Das ist ein bekannter Bug, der auf auf Desktop-Browsern auftritt.
Das Problem tritt aber nicht nur auf dem Desktop auf, sondern auch auf meinem iPhone ...

Ich vermute mal das erste "auf" sollte ein auch sein und molily war einfach schon zu weit im Gedankenfluss.

MfG
bubble