web-dev-qa-db-de.com

Verhindern, dass die Bildlaufleiste zur Seitenbreite in Chrome addiert wird

Ich habe ein kleines Problem mit dem Versuch, meine .html-Seiten in Chrome auf einer konstanten Breite zu halten, Zum Beispiel habe ich eine Seite (1) mit viel Inhalt, die die Höhe des Viewports (das richtige Wort?) Überläuft, also gibt es eine Vertikale Bildlaufleiste auf dieser Seite (1). Auf Seite (2) habe ich dasselbe Layout (Menüs, divs, ... usw.), aber weniger Inhalt, also keine vertikalen Bildlaufleisten.

Das Problem ist, dass die Bildlaufleisten auf Seite (1) scheinbar Elemente etwas nach links schieben (auf die Breite addieren?), Während auf Seite (2) alles 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 für IE10 und FireFox (nicht störende Bildlaufleisten). Ich bin nur auf Chrome gestoßen.

95
Acemad

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/

31
Lwyrn

Alter Thread, aber immer noch relevant!

Dies funktioniert nur bei WebKit-Browsern , aber ich mag es sehr .. Wird sich wie andere Browser auf auto verhalten.

.yourContent{
   overflow-y: overlay;
}

Dadurch wird die Bildlaufleiste nur als Überlagerung angezeigt. Dies wirkt sich nicht auf die width Ihres Elements aus!

83
simonDos

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

53
Hive7

Webkit-Browser wie Safari und Chrome ziehen bei der Berechnung der Breite die Breite der Bildlaufleiste von der sichtbaren Seitenbreite ab: 100% oder 100 vw. Mehr unter DM Rutherfords Scrolling und Page Width .

Verwenden Sie stattdessen overflow-y: overlay.

19
Kyle Dumovic

Wahrscheinlich

html {
    width: 100vw;
}

ist genau das, was du willst.

12

Ich fand, ich könnte hinzufügen

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

direkt auf meine 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!

12
fuzzy_logic_77

Es scheint nicht, dass meine andere Antwort im Moment richtig funktioniert (aber ich werde weiterhin versuchen, sie einsatzbereit zu machen).

Grundsätzlich müssen Sie jedoch die Breite des Inhalts auf etwas weniger als die Breite des übergeordneten, scrollbaren Bereichs einstellen.
Wenn die Bildlaufleiste angezeigt wird, hat dies keine Auswirkungen auf den Inhalt.

Dieses BEISPIEL zeigt einen hackleren Weg, dieses Ziel zu erreichen, indem widths hartcodiert wird, anstatt zu versuchen, den Browser über padding für uns zu erledigen.
Wenn dies möglich ist, ist dies die einfachste Lösung, wenn Sie keine permanente Bildlaufleiste wünschen.

2
Hashbrown

EDIT: 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, das Problem zu beheben, aber wenn Sie Hilfe anbieten können, tun Sie dies in den Kommentaren. Danke!

Durch die Verwendung von padding-right wird das plötzliche Auftreten einer Bildlaufleiste gemindert

BEISPIEL

chrome devtools showing padding unmoved

Wie Sie an den Punkten sehen können, wird der Text vor dem Umbruch an der gleichen Stelle auf der Seite angezeigt, unabhängig davon, ob eine Bildlaufleiste vorhanden ist oder nicht.
Dies liegt daran, dass sich die Auffüllung beim Einfügen einer Bildlaufleiste dahinter verbirgt, sodass die Bildlaufleiste den Text nicht drückt!

1
Hashbrown

Für Container mit fester Breite kann eine reine CSS-Cross-Browser-Lösung erreicht werden, indem der Container in ein anderes div verpackt wird 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 zu sehen

0
Robbendebiene
.modal-dialog {
   position: absolute;
   left: calc(50vw - 300px);
}

dabei ist 300 px eine Hälfte meiner Dialogfensterbreite.

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

0

Ich kann für die erste Antwort keinen Kommentar 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') entspricht immer b.height (),

Ich denke es sollte so sein:

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

Zum Schluss empfehle ich eine Methode:

html {
 overflow-y: scroll;
}

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

:root body {
  position: absolute;
}

body {
 width: 100vw;
 overflow: hidden;
}
0
jeremy

Ich hatte das gleiche Problem in Chrome. Es ist nur für mich passiert, wenn die Bildlaufleiste immer sichtbar ist. (in den allgemeinen Einstellungen gefunden) Ich habe eine Modalität und als ich die Modalität ö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;
}
0
NatD