Zapobiegaj dodawaniu paska przewijania do szerokości strony w Chrome

Mam mały problem z utrzymaniem stałej szerokości moich stron .html w Chrome. Na przykład mam stronę (1) z dużą ilością treści, która przekracza wysokość widocznego obszaru (właściwe słowo?), Więc jest tam pionowy pasek przewijania na tej stronie (1). Na stronie (2) mam ten sam układ (menu, elementy div, ... itd.), Ale mniej treści, więc nie ma tam pionowych pasków przewijania.

Problem polega na tym, że na stronie (1) paski przewijania wydają się przesuwać elementy nieco w lewo (dodając do szerokości?), Podczas gdy na stronie (2) wszystko wygląda na dobrze wyśrodkowane

Wciąż jestem początkującym użytkownikiem HTML / CSS / JS i jestem przekonany, że nie jest to takie trudne, ale nie miałem szczęścia w znalezieniu rozwiązania. Działa zgodnie z przeznaczeniem na IE10 i FireFox (niezakłócające paski przewijania), spotkałem się z tym tylko w Chrome.

Możesz uzyskać rozmiar paska przewijania, a następnie zastosować margines do kontenera.

Coś takiego:

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 do usunięcia h-scrollbar:

body{
    overflow-x:hidden;
}

Spróbuj przyjrzeć się temu: http://jsfiddle.net/NQAzt/

ZRZECZENIE SIĘ : nakładka została wycofana .
Nadal możesz tego użyć, jeśli absolutnie musisz, ale staraj się tego nie robić.

Działa to tylko w przeglądarkach WebKit , ale bardzo mi się podoba. Będzie się zachowywać jak autow innych przeglądarkach.

.yourContent{
   overflow-y: overlay;
}

Spowoduje to, że pasek przewijania pojawi się tylko jako nakładka , nie wpływając w ten sposób na szerokość elementu!

Wystarczy, że dodasz:

html {
    overflow-y: scroll;
}

W twoim pliku css, ponieważ będzie on zawierał scroller, czy jest potrzebny, czy nie, chociaż po prostu nie będziesz w stanie przewijać

Oznacza to, że rzutnia będzie miała taką samą szerokość dla obu

Prawdopodobnie

html {
    width: 100vw;
}

jest właśnie tym, czego chcesz.

Przeglądarki Webkit, takie jak Safari i Chrome, odejmują szerokość paska przewijania od widocznej szerokości strony podczas obliczania szerokości: 100% lub 100vw. Więcej na temat przewijania i szerokości strony DM Rutherforda .

Spróbuj użyć overflow-y: overlayzamiast tego.

Okazało się, że mogę dodać

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

bezpośrednio do mojego css i spowodowałoby to, że pasek przewijania byłby niewidoczny, ale nadal pozwalałby mi przewijać (przynajmniej w Chrome). Przydaje się, gdy nie chcesz, aby rozpraszający Cię pasek przewijania na Twojej stronie!

W przypadku kontenerów o stałej szerokości można zastosować rozwiązanie CSS w różnych przeglądarkach, umieszczając kontener w innym elemencie div i stosując tę ​​samą szerokość do obu elementów div.

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

Kliknij tutaj, aby zobaczyć przykład na Codepen

Nie wygląda na to, że moja druga odpowiedź działa w tej chwili całkiem nieźle (ale nadal będę próbować ją uruchomić).

Ale w zasadzie to, co musisz zrobić, i to, co próbowała zrobić dynamicznie, to ustawić szerokość zawartości na nieco mniejszą niż szerokość nadrzędnego, przewijalnego panelu.
Tak więc kiedy pojawi się pasek przewijania, nie ma to wpływu na zawartość.

Ten PRZYKŁAD pokazuje bardziej hakerski sposób osiągnięcia tego celu, poprzez twarde kodowanie widthzamiast próbowania zmusić przeglądarkę do zrobienia tego za nas padding.
Jeśli jest to wykonalne, jest to najprostsze rozwiązanie, jeśli nie chcesz mieć stałego paska przewijania.

_{EDYTUJ: ta odpowiedź nie jest w tej chwili całkiem poprawna, zapoznaj się z moją drugą odpowiedzią, aby zobaczyć, co próbowałem tutaj zrobić. Próbuję to naprawić, ale jeśli możesz zaoferować pomoc, zrób to w komentarzach, dzięki!}

Używanie padding-rightzłagodzi nagłe pojawienie się paska przewijania

PRZYKŁAD

Jak widać z kropek, tekst dociera do tego samego miejsca na stronie przed zawinięciem, niezależnie od tego, czy jest obecny pasek przewijania.
Dzieje się tak, ponieważ po wprowadzeniu paska przewijania wypełnienie ukrywa się za nim, więc pasek przewijania nie naciska na tekst!

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

gdzie 300 pikseli to połowa szerokości mojego okna dialogowego.

To właściwie jedyna rzecz, która działała dla mnie.

Miałem ten sam problem w Chrome. Zdarzyło mi się to tylko wtedy, gdy pasek przewijania jest zawsze widoczny. (znalezione w ustawieniach ogólnych) mam modal i kiedy otworzę modal zauważyłem że ...

body {
    padding-left: 15px;
}

jest dodawany do ciała. Aby temu zapobiec, dodałem

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

Nie mogę dodać komentarza do pierwszej odpowiedzi i minęło dużo czasu ... ale to demo ma problem:

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

b.prop ('scrollHeight') zawsze równa się b.height (),

Myślę, że powinno być tak:

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

Na koniec polecam metodę:

html {
 overflow-y: scroll;
}

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

:root body {
  position: absolute;
}

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