2012-04-13 6 views
5

Ich habe ein div mit position: absolute gesetzt und es ist nur ein bisschen breiter als mein Browserfenster. Ich habe die horizontale Bildlaufleiste erfolgreich ausgeblendet, aber ich kann immer noch mit einem Trackpad durchblättern.Körper: Überlauf-x - immer noch mit Trackpad überrollen

Gibt es eine Möglichkeit, dies zu umgehen?

<div id="container"> 
    <div id="big-image"></div> 
</div><!-- #container --> 

#container { 
    overflow-x: hidden; 
} 

#big-image { 
    background: transparent url('/path/to/image.png') no-repeat center top; 
    position: absolute; 
    width: 1307px; 
    left: 50%; 
    margin: 0 0 0 -653.5px; 
    z-index: 4; 
} 

Antwort

7

Wenn Sie die Höhe von #container nicht begrenzen, setzen Sie den Überlauf auf hidden, da overflow-x seltsam ist, da er die Bildlaufleiste entfernt, aber dennoch einen Bildlauf ermöglicht.

Beispiel

body { 
    overflow-x: hidden; 
} 

#container { 
    overflow: hidden; 
    width: 100%; 
} 
+0

Dies funktionierte, aber es gibt ein kleines Problem, wenn das Fenster klein genug ist, um den _content Bereich_ verursacht die horizontale Bildlaufleiste zu erscheinen. Das heißt, Sie können scrollen, aber das Bild, das ich benutzte, ist abgeschnitten und es ist nur weiß, wohin das Bild gehen sollte. Trotzdem, danke! Für den Moment habe ich mit JS herum gearbeitet, aber kann es mit reinem CSS gemacht werden? –

+0

Ich bin mir nicht sicher, was Sie im Inhaltsbereich sagen: S Vielleicht setzen Sie die Überlaufeigenschaft davon auch ausgeblendet? –

+0

Ich habe gerade festgestellt, dass ich niemals auf deine Frage geantwortet habe. Ich kann mich nicht erinnern, woran ich gerade gearbeitet habe, aber ich denke, ich kann es erklären. Technisch habe ich das nie komplett herausgefunden und ich habe immer noch meine JS Workaround an Ort und Stelle lol. –

1

Sie wahrscheinlich position: fixed; auf dem #big-image nutzen könnten.

+0

Benutzer nach wie vor blättern _down_ braucht, und 'Position: fixed' die div an der Spitze gepflanzt halten auch nach dem Scrollen. Danke trotzdem. –

+0

Ich kann Ihnen nur schwer helfen, wenn ich Ihre Anforderungen nicht kenne. –

+0

Entschuldigung, ich schätze Ihre Absicht zu helfen, obwohl! :) –

Verwandte Themen