2013-10-06 9 views
7

Wie kann ich verhindern, dass der Hauptteil der Seite nach links verschoben wird, wenn eine Bildlaufleiste aufgrund von Ajax-Inhalt erscheint? Ich kann natürlich Überlauf einstellen: scrollen Sie zum Körper, aber es würde nicht gut aussehen.Verhindern von Relayout durch Rollbalken

Ich benutze Bootstrap, aber ich denke, es ist eine allgemeine Frage.

+0

Körper Inhalt wird geschoben ?? Unklar. Sei genauer. Ich glaube nicht, dass so etwas genannt wird, das weggedrückt wird. Möglicherweise wegen Ihrer Markup oder Stile. Bring etwas zum Debuggen auf. Geige bitte –

+2

Die Seite hat ursprünglich nicht die Bildlaufleiste. Dann hängt Ajax mehr Inhalt an und die Bildlaufleiste erscheint. Um die Breite der Bildlaufleiste zu berücksichtigen, wird der ursprüngliche Körper "gedrückt". Ich sehe das in Chrome und Firefox passiert. Ich werde später eine Geige spielen, wenn es keine andere Antwort gibt. – Dionysian

+0

Ich meine, die Bildlaufleiste ist von Größe sagen 10px. Das wird dich nicht drastisch beeinflussen. Vernachlässigbar shift ryt. Sie können dieses Problem nicht ohne Überlauf behandeln: scroll. Andernfalls müssen Sie eine benutzerdefinierte Bildlaufleiste mit Z-Index verwenden. –

Antwort

6

Sie einen Container erstellen können, die eine feste Breite haben, und geben Sie den Inhalt die gleiche Breite (gleiche statische Breite - nicht 100%). Wenn der Inhalt den Parent überläuft, wird der Inhalt nicht durch den Bildlauf verschoben, sondern darüber.

mit diesem können Sie eine coole Art und Weise anwenden, um zu blättern, ohne etwas zu drücken. indem Sie die Rolle nur anzeigen lassen, wenn Sie den Container bewegen.

Schauen Sie sich diese einfache Demo

EDIT: Here zeige ich den Unterschied zwischen statischen Breite einstellen und%.

+0

Das ist neu für mich und sieht vielversprechend aus. Danke vielmals! – Dionysian

+0

@ user2643506 Wenn es für Sie arbeitet, sollten Sie es als eine richtige Antwort akzeptieren. – avrahamcool

1

Nun, die Scrollbar wird immer Ihren Inhalt beiseite schieben, da gibt es wirklich nichts, was Sie dagegen tun können. Was Sie tun können, ist immer zum Beispiel Scrollbar zu zeigen:

html,body { 
    height:101%; 
} 

oder

html { 
    overflow-y: scroll; 
} 
Verwandte Themen