Antworten zum Thema „Vertikales Scrollen verhindern“

[PILOTLINE]

Hallo zusammen

Ich arbeite derzeit an einem Webseiten-Projekt. Dieses enthält jedoch noch so einige Bugs. Im Projekt ist der Header breiter als der Bildschirm (das ist bewusst so), damit der Header also komplett durchgehend ist. Das Problem ist nun aber, dass die Browser meinen, die Webseite sei wirklich so breit.
Deshalb war dann ein vertikaler Scrollbalken sichtbar. Da hab ich nun geschafft, dass der nicht mehr sichtbar ist. ABER: mit den Pfeiltasten lässt sich die Webseite immernoch vertikal verschieben.

Das könnt ihr auf einer der folgenden Seiten unter folgendem Link ausprobieren:
www.airlink.ch
> Webseite öffnen und die rechte Pfeiltaste drücken. Die Webseite verschiebt sich (ist zumindest im Firefox der Fall, in Chrome so viel ich weiss nicht).

Dieser Bug ist zwar nicht sofort sichtbar, aber dennoch stört mich dieser. Bei anderen Webseiten, die ebenfalls einen Header mit grosser Breite haben, tritt dieses Phänomen nicht auf.

Gibt es somit eine Möglichkeit, nicht nur den vertikalen Scrollbalken, sondern auch das vertikale Scrollen zu verhindern?

Danke für Eure Hilfe, Gruss Tobias

 

[lipsum media]

Guten Abend,

1. Hast du vertikal mit horizontal verwechselt, aber kann ja mal passieren ;-)

2. hat der in der layout.css definierte body eine fixe Breite von 1000px zugewiesen bekommen, ändere diesen Wert mal in 100% (Angabe ist dann relativ zum Browserfenster - generell würde ich von fixen Pixelmaßen absehen).

Ich hoffe, das hilft weiter.

 

[cebito]

hat der in der layout.css definierte body eine fixe Breite von 1000px zugewiesen bekommen, ändere diesen Wert mal in 100%

Das reicht leider nicht. Der header hat 1000px wie der body +2x1000px padding (rechts und links) ist also 3000px breit. Bei 100% body wär er also immer 2000px breiter als der Viewport. Ein 1x130px großes Hintergrundbild für das HTML-Element nur horizontal wiederholt würde hier die schnellste Lösung bringen, dann kann man das fette padding und die rumschieberei mit negativem margin weglassen.

 

[lipsum media]

Das reicht leider nicht. Der header hat 1000px wie der body +2x1000px padding (rechts und links) ist also 3000px breit. Bei 100% body wär er also immer 2000px breiter als der Viewport. Ein 1x130px großes Hintergrundbild für das HTML-Element nur vertikal wiederholt würde hier die schnellste Lösung bringen, dann kann man das fette padding und die rumschieberei mit negativem margin weglassen.

Hab ich wohl übersehen, Asche auf mein Haupt... Aber ist ja auch schon spät