Verhindern Sie, dass die Bildlaufleiste in Chrome zur Seitenbreite addiert wird

125

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.

Acemad
quelle

Antworten:

42

Sie können die Größe der Bildlaufleiste ermitteln und dann einen Rand auf den Container anwenden.

Etwas wie das:

var checkScrollBars = function(){
    var b = $('body');
    var normalw = 0;
    var scrollw = 0;
    if(b.prop('scrollHeight')>b.height()){
        normalw = window.innerWidth;
        scrollw = normalw - b.width();
        $('#container').css({marginRight:'-'+scrollw+'px'});
    }
}

CSS zum Entfernen der h-Bildlaufleiste:

body{
    overflow-x:hidden;
}

Versuchen Sie, einen Blick darauf zu werfen: http://jsfiddle.net/NQAzt/

Lwyrn
quelle
1
Clevere Lösung, ich verstehe den Zustand im "Wenn" allerdings nicht!
Acemad
3
Die scrollHeight ist die Gesamthöhe eines Elements. Was du siehst und was versteckt ist. Ein Beispiel: Ihr Fenster hat eine Höhe von 500 Pixel, der Körper hat einen Inhalt von 900 Pixel. 500px werden angezeigt, aber die anderen 400px sind ausgeblendet und die Bildlaufleiste zeigt dieses verbleibende Pixel an. Die Bedingung lautet also: "Wenn die Höhe des gesamten Inhalts größer als die Höhe des Ansichtspunkts ist, fügen Sie dem Körper den Rand hinzu." Entschuldigung für mein schlechtes Englisch
Lwyrn
Ich habe es jetzt bekommen, danke für die klare Erklärung, ich habe diese Lösung ausprobiert und eine zusätzliche horizontale Bildlaufleiste bekommen, weiß aber nicht warum.
Acemad
2
Ich habe ein kleines Stück
CSS
4
Diese Lösung deaktiviert das Scrollen
Lawine1
117

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 autoin anderen Browsern.

.yourContent{
   overflow-y: overlay;
}

Dadurch wird die Bildlaufleiste nur als Überlagerung angezeigt , wodurch die Breite Ihres Elements nicht beeinträchtigt wird !

simonDos
quelle
Es funktioniert nicht für IE11. Gibt es eine Problemumgehung, damit der Overlay-Wert im IE funktioniert?
Anvesh Reddy
nicht so weit ich weiß, müssen Sie mit den anderen in diesem Thread vorgeschlagenen Optionen für IE
simonDos
Viel erforderlich! Ich habe mehr als eine halbe Stunde gebraucht, um zu sehen, was zum Teufel ich mit meinem Markup falsch gemacht habe. Welche Stile habe ich überbeansprucht? Dies sollte auch Standard sein.
Kushalvm
3
Aber es ist veraltet
Akash Yellappa
1
Ich habe die Lösung aktualisiert, um dies widerzuspiegeln. Ein
bisschen
57

Alles was Sie tun müssen, ist hinzuzufügen:

html {
    overflow-y: scroll;
}

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

Hive7
quelle
4
Also bin ich verpflichtet, beiden Bildlaufleisten hinzuzufügen? Gibt es keine Möglichkeit, die Breite der vertikalen Bildlaufleiste einfach zu ignorieren? Danke !
Acemad
Es gibt keine Möglichkeit, es zu ignorieren, von dem ich weiß, aber was ich sagte, funktioniert ein Vergnügen @ Rockr90
Hive7
@ d3c0y das ist wahr und ich habe es in der Antwort erwähnt, aber es ist die einfachste Methode, dies zu tun. Ich weiß nicht, ob sich das in den letzten 3 Jahren geändert hat
Hive7
@aks. es zwingt den Browser zu denken, dass Sie scrollen können, so dass es möglich ist, die Bildlaufleiste zu scrollen und zu scrollen y ist der seitliche Scroller
Hive7
1
Überlauf-y: scrollen; fügt die Bildlaufleiste in allen Ansichtsfenstern hinzu / zeigt sie an, auch wenn keine scrollbaren Elemente vorhanden sind.
Abhilash
35

Wahrscheinlich

html {
    width: 100vw;
}

ist genau das, was du willst.

Neurotransmitter
quelle
1
Dies funktionierte hervorragend für meinen Anwendungsfall: gist.github.com/bmcminn/1ab50da18bde75f39bc88e8292a5a847 Ich verwende 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.
bmcminn
3
Ich habe in den letzten 36 Stunden mit meinen Bildlaufleisten herumgespielt. Ich hatte einige verschiedene Lösungen, die funktionierten, aber andere Probleme aufwarfen. Dies ist die erste Lösung, die sowohl funktioniert als auch es mir ermöglicht, eine normale Bildlaufleiste an anderer Stelle zu verwenden. Danke dir.
koscher
Bitte! Aber mit htmlder Breite in vws herumzuspielen ist ein bisschen hacky , also seien Sie bitte vorsichtig!
Neurotransmitter
Das hat super funktioniert, kann jemand erklären, wie das funktioniert?
Zeus
1
Lösung nicht schlecht, aber es könnte horizontales Scrollen hinzufügen.
FDisk
18

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: overlaystattdessen.

Kyle Dumovic
quelle
9
Bitte posten Sie keine identischen Antworten auf mehrere Fragen. Schreiben Sie eine gute Antwort und stimmen Sie ab, um die anderen Fragen als Duplikate zu schließen. Wenn die Frage kein Duplikat ist, passen Sie Ihre Antworten auf die Frage an.
Paul Roub
Dies sollte funktionieren, aber Overlay ist noch nicht Standard und wird auch nicht in allen Browsern unterstützt.
Zia Ul Rehman Mughal
Schneller Schluckauf: In Safari
hörte
13

Ich fand, ich könnte hinzufügen

::-webkit-scrollbar { 
display: none; 
}

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!

fuzzy_logic_77
quelle
5
Es ist etwas riskant und keine browserübergreifende Lösung, obwohl stackoverflow.com/questions/9251354/…
Alex Pyzhianov
4

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.

#outer {
  overflow-y: auto;
  overflow-x: hidden;
  /*
   * width must be an absolute value otherwise the inner divs width must be set via
   * javascript to the computed width of the parent container
   */
  width: 200px;
}

#inner {
  width: inherit;
}

Klicken Sie hier, um ein Beispiel für Codepen anzuzeigen

Robbendebiene
quelle
3

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 widths hartcodiert wird, anstatt zu versuchen, den Browser dazu zu bringen, dies für uns zu tun padding.
Wenn dies möglich ist, ist dies die einfachste Lösung, wenn Sie keine permanente Bildlaufleiste wünschen.

Hashbrown
quelle
Das ist eine gute Lösung, aber ich arbeite mit Bootstrap an einer reaktionsschnellen Website, und es ist wichtig, die Breite und alles zu automatisieren. Was sagen Sie?
Acemad
Nun, es sei denn (in der Reihenfolge der abnehmenden Wahrscheinlichkeit): Jemand findet heraus, wie ich meine andere Antwort zum Laufen bringen kann (entweder mit Polsterung oder Rand); Sie können Medienabfragen verwenden , um das Auffüllen selektiv anzuwenden. oder CSS - Ausdrücke werden in modernen Browsern implementiert , um selektiv padding anzuwenden. Ich denke, nur eine permanente Bildlaufleiste oder die Verwendung von JS zur Erkennung der Bildlaufleiste ist der
richtige
1

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-rightdie Verwendung wird das plötzliche Auftreten einer Bildlaufleiste verringert

BEISPIEL

Chrom-Devtools mit unbewegtem Polster

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!

Hashbrown
quelle
3
Die Breite der Bildlaufleiste kann sich je nach verwendetem Betriebssystem und Browser ändern. Es kann 20px sowie 40px messen
Lwyrn
2
Nun,
1
Die Schriftrollen einiger Geräte / Betriebssystembrowser haben nicht einmal eine Breite.
Sergey Goliney
0
.modal-dialog {
   position: absolute;
   left: calc(50vw - 300px);
}

Dabei ist 300 px die Hälfte meiner Dialogfensterbreite.

Dies ist eigentlich das einzige, was für mich funktioniert hat.

Piotr Siatkowski
quelle
0

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 ...

body {
    padding-left: 15px;
}

wird dem Körper hinzugefügt. Um dies zu verhindern, fügte ich hinzu

body {
    padding-left: 0px !important;
}
NatD
quelle
0

Ich kann keinen Kommentar für die erste Antwort hinzufügen und es ist lange her ... aber diese Demo hat ein Problem:

if(b.prop('scrollHeight')>b.height()){
    normalw = window.innerWidth;
    scrollw = normalw - b.width();
    $('#container').css({marginRight:'-'+scrollw+'px'});
}

b.prop ('scrollHeight') ist immer gleich b.height (),

Ich denke es sollte so sein:

if(b.prop('scrollHeight')>window.innerHeight) ...

Endlich empfehle ich eine Methode:

html {
 overflow-y: scroll;
}

:root {
  overflow-y: auto;
  overflow-x: hidden;
}

:root body {
  position: absolute;
}

body {
 width: 100vw;
 overflow: hidden;
}
Jeremy
quelle