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

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.

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/

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 !

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

Wahrscheinlich

html {
    width: 100vw;
}

ist genau das, was du willst.

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.

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!

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

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.

_{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

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!

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

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;
}

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;
}