Verhindert, dass die Bildlaufleiste zur Seitenbreite in Chrome addiert wird

Ich habe ein kleines Problem versucht zu halten meine .html-Seiten auf eine einheitliche Breite auf Chrom,
Zum Beispiel habe ich eine Seite (1) mit einer Menge von Inhalten, die überläufe des Viewports (richtige Wort?) Höhe, so dass es eine vertikale scroll-Leiste auf Seite (1). Auf Seite (2) ich habe das gleiche layout (Menü, divs,...etc), aber weniger Inhalt, so dass kein vertikaler scroll-Balken.

Das problem ist, dass auf der Seite (1) der scroll-bars scheinen push-Elemente, leicht nach Links (adding-up, um die Breite?) während alles erscheint nun zentriert auf die Seite (2)

Ich bin noch Anfänger auf HTML/CSS/JS, und ich bin ziemlich überzeugt, dass dies nicht so schwierig, aber ich hatte kein Glück, herauszufinden, die Lösung. Es funktioniert wie vorgesehen auf IE10 und FireFox (nicht störende scroll-bars), habe ich nur Probleme in Chrome.

InformationsquelleAutor der Frage Acemad | 2013-08-31

Können Sie die Bildlaufleiste Größe und wenden Sie dann eine Marge um die container.

Etwas wie dieses:

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 entfernen Sie die h-scrollbar:

body{
    overflow-x:hidden;
}

Versuchen Sie, einen Blick auf diese:
http://jsfiddle.net/NQAzt/

InformationsquelleAutor der Antwort Lwyrn

51

Alles, was Sie tun müssen, ist hinzuzufügen:
```
html {
    overflow-y: scroll;
}
```
In der css-Datei haben Sie die scroller-egal ob Sie benötigt wird oder nicht, obwohl Sie gerade sein wird nicht in der Lage, um zu Blättern

Dies bedeutet, dass die Viewports wird die gleiche Breite für beide

InformationsquelleAutor der Antwort Hive7
42

Alter thread, aber immer noch relevant!

Dies funktioniert nur auf WebKit-Browsernaber ich mag es sehr.
Verhält sich wie auto auf anderen Browsern.
```
.yourContent{
   overflow-y: overlay;
}
```
Dadurch wird die Bildlaufleiste nur angezeigt, als overlaybeeinflussen also nicht die die Breite von Ihrem element!

InformationsquelleAutor der Antwort simonDos
18

Webkit-Browsern wie Safari und Chrome, subtrahieren Sie die scroll-bar-Breite vom sichtbaren Seite Breite bei der Berechnung width: 100% oder 100vw. Mehr unter DM Rutherford Scrollen und Seite Breite.

Versuchen Sie es mit overflow-y: overlay statt.

InformationsquelleAutor der Antwort Kyle Dumovic
11

Fand ich, ich könnte hinzufügen
```
::-webkit-scrollbar { 
display: none; 
}
```
direkt auf meine css und es würde die scrollbar unsichtbar, aber immer noch erlauben, mich zu scrollen (Chrome zumindest). Gut für die, wenn Sie nicht wollen, eine störende Scrollbalken auf deiner Seite!

InformationsquelleAutor der Antwort fuzzy_logic_77
7

Wahrscheinlich
```
html {
    width: 100vw;
}
```
ist genau das, was Sie wollen.

InformationsquelleAutor der Antwort TranslucentCloud
2

Es scheint nicht meine andere Antwort ist die Arbeit Recht im moment (aber ich werde es weiter versuchen, bis es betriebsbereit ist).

Aber im Grunde, was Sie tun müssen, und was es versucht zu tun, die dynamisch ist, wird der Inhalt in der Breite geringfügig kleiner ist als der der Muttergesellschaft, der scrollbare Bereich.

So dass, wenn die Bildlaufleiste angezeigt wird es hat keinen Einfluss auf den Inhalt.

Diese BEISPIEL zeigt eine weitere hacky Art und Weise der Erreichung dieses Zieles durch hardcoding widths, anstatt zu versuchen, den browser zu tun es für uns über padding.

Wenn es möglich ist, das ist die einfachste Lösung, wenn Sie nicht möchten, dass eine dauerhafte scrollbar.

InformationsquelleAutor der Antwort Hashbrown
1

_{EDIT: diese Antwort ist nicht ganz Recht im moment, siehe meine andere Antwort zu sehen, was war ich versucht, hier zu tun. Ich bin versucht, es zu beheben, aber wenn Sie bieten können, die Hilfe also in die Kommentare, danke!}

Mit padding-right zu mildern wird das plötzliche auftauchen eines scrollbar -

BEISPIEL

Wie Sie sehen können aus die Punkte, der text macht es an der gleichen Stelle in der Seite vor dem Umbruch, unabhängig davon, ob ein scrollbar vorhanden ist.

Dies ist, weil, wenn ein Scrollbalken eingeführt, der Polsterung verbirgt sich dahinter, so dass die scrollbar nicht "push" auf den text!

InformationsquelleAutor der Antwort Hashbrown
0
```
.modal-dialog {
   position: absolute;
   left: calc(50vw - 300px);
}
```
wo 300 px ist die Hälfte meiner dialog-Fenster Breite.

Dies ist eigentlich die einzige Sache, die für mich gearbeitet.

InformationsquelleAutor der Antwort Piotr Siatkowski
0

Für Container mit einer festen Breite eine Reine CSS cross-browser-Lösung erreicht werden kann durch umwickeln der Behälter in einen anderen div und die Anwendung der gleichen Breite, die beiden divs.
```
#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 zu sehen auf Codepen

InformationsquelleAutor der Antwort Robbendebiene

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.