Ich habe ein kleines Problem beim Versuch, meine HTML-Seiten in Chrome auf einer einheitlichen Breite zu halten. Beispielsweise habe ich eine Seite (1) mit vielen Inhalten, die über die Höhe des Ansichtsfensters (rechtes Wort?) Überlaufen, sodass eine vertikale Bildlaufleiste angezeigt wird auf dieser Seite (1). Auf Seite (2) habe ich das gleiche Layout (Menüs, Divs, ... usw.), aber weniger Inhalt, also keine vertikalen Bildlaufleisten.
Das Problem ist, dass auf Seite (1) die Bildlaufleisten die Elemente leicht nach links zu verschieben scheinen (addiert sich zur Breite?), Während auf Seite (2) alles gut zentriert erscheint.
Ich bin noch ein Anfänger in HTML / CSS / JS und ich bin ziemlich überzeugt, dass dies nicht so schwierig ist, aber ich hatte kein Glück, die Lösung herauszufinden. Es funktioniert wie vorgesehen unter IE10 und FireFox (nicht störende Bildlaufleisten). Dies ist mir nur in Chrome begegnet.
quelle
HAFTUNGSAUSSCHLUSS : Overlay ist veraltet .
Sie können dies immer noch verwenden, wenn Sie es unbedingt müssen, aber versuchen Sie es nicht.
Dies funktioniert nur in WebKit-Browsern , aber ich mag es sehr. Verhält sich wie
auto
in anderen Browsern.Dadurch wird die Bildlaufleiste nur als Überlagerung angezeigt , wodurch die Breite Ihres Elements nicht beeinträchtigt wird !
quelle
Alles was Sie tun müssen, ist hinzuzufügen:
In Ihrer CSS-Datei wird der Scroller angezeigt, ob er benötigt wird oder nicht, obwohl Sie einfach nicht scrollen können
Dies bedeutet, dass das Ansichtsfenster für beide die gleiche Breite hat
quelle
Wahrscheinlich
ist genau das, was du willst.
quelle
calc()
, um die Breite der Hauptinhaltsansicht zu bestimmen, damit das feste Offscreen-Navi die linke Seite des Bildschirms auf dem Desktop einnehmen kann, während native beibehalten wird auf dem Handy scrollen.html
der Breite invw
s herumzuspielen ist ein bisschen hacky , also seien Sie bitte vorsichtig!Webkit-Browser wie Safari und Chrome subtrahieren bei der Berechnung der Breite die Breite der Bildlaufleiste von der sichtbaren Seitenbreite: 100% oder 100vw. Mehr unter DM Rutherfords Bildlauf und Seitenbreite .
Versuchen Sie es
overflow-y: overlay
stattdessen.quelle
Ich fand, ich könnte hinzufügen
direkt zu meinem CSS und es würde die Bildlaufleiste unsichtbar machen, aber ich kann trotzdem scrollen (zumindest in Chrome). Gut, wenn Sie keine ablenkende Bildlaufleiste auf Ihrer Seite haben möchten!
quelle
Für Container mit einer festen Breite kann eine reine CSS-Cross-Browser-Lösung erreicht werden, indem der Container in ein anderes Div eingewickelt und auf beide Divs dieselbe Breite angewendet wird.
Klicken Sie hier, um ein Beispiel für Codepen anzuzeigen
quelle
Es scheint nicht, dass meine andere Antwort im Moment ganz richtig funktioniert (aber ich werde weiterhin versuchen, sie betriebsbereit zu machen).
Grundsätzlich müssen Sie jedoch die Breite des Inhalts auf etwas weniger als die des übergeordneten, scrollbaren Bereichs einstellen, und dies wurde dynamisch versucht.
Wenn die Bildlaufleiste angezeigt wird, hat dies keine Auswirkungen auf den Inhalt.
Dieses BEISPIEL zeigt einen hackigeren Weg, um dieses Ziel zu erreichen, indem
width
s hartcodiert wird, anstatt zu versuchen, den Browser dazu zu bringen, dies für uns zu tunpadding
.Wenn dies möglich ist, ist dies die einfachste Lösung, wenn Sie keine permanente Bildlaufleiste wünschen.
quelle
BEARBEITEN: Diese Antwort ist im Moment nicht ganz richtig. Sehen Sie sich meine andere Antwort an, um zu sehen, was ich hier versucht habe. Ich versuche es zu beheben, aber wenn Sie Hilfe in den Kommentaren anbieten können, danke!
Durch
padding-right
die Verwendung wird das plötzliche Auftreten einer Bildlaufleiste verringertBEISPIEL
Wie Sie an den Punkten sehen können, erreicht der Text vor dem Umbruch den gleichen Punkt auf der Seite, unabhängig davon, ob eine Bildlaufleiste vorhanden ist oder nicht.
Dies liegt daran, dass beim Einführen einer Bildlaufleiste die Polsterung dahinter ausgeblendet wird, sodass die Bildlaufleiste nicht auf den Text drückt!
quelle
Dabei ist 300 px die Hälfte meiner Dialogfensterbreite.
Dies ist eigentlich das einzige, was für mich funktioniert hat.
quelle
Ich hatte das gleiche Problem bei Chrome. Es ist mir nur passiert, wenn die Bildlaufleiste immer sichtbar ist. (in den allgemeinen Einstellungen zu finden) Ich habe ein Modal und als ich das Modal öffne, habe ich festgestellt, dass ...
wird dem Körper hinzugefügt. Um dies zu verhindern, fügte ich hinzu
quelle
Ich kann keinen Kommentar für die erste Antwort hinzufügen und es ist lange her ... aber diese Demo hat ein Problem:
b.prop ('scrollHeight') ist immer gleich b.height (),
Ich denke es sollte so sein:
Endlich empfehle ich eine Methode:
quelle