Zapobiegaj dodawaniu paska przewijania do szerokości strony w Chrome


125

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.

Odpowiedzi:


42

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/


1
Sprytne rozwiązanie, ale nie rozumiem warunku w „jeśli”!
Acemad

3
ScrollHeight to całkowita wysokość elementu. To, co widzisz, a co ukryte. Przykład: Twoje okno ma wysokość około 500 pikseli, jego treść to 900 pikseli. Wyświetlane jest 500 pikseli, ale pozostałe 400 pikseli jest ukryte i pojawi się pasek przewijania, aby pokazać ten remanujący piksel. Tak więc warunek jest taki, że „jeśli wysokość całej treści jest większa niż wysokość punktu widzenia, dodaj margines do treści”. Przepraszam za mój zły angielski
Lwyrn

Mam to teraz, dzięki za jasne wyjaśnienie, wypróbowałem to rozwiązanie i otrzymałem dodatkowy poziomy pasek przewijania, chociaż nie wiem dlaczego.
Acemad

2
Dodałem mały fragment css, aby temu zapobiec w odpowiedzi :)
Lwyrn

4
To rozwiązanie wyłącza przewijanie
lawina1

117

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!


To nie działa dla IE11. Czy istnieje obejście problemu działania wartości nakładki w IE?
Anvesh Reddy,

nie o ile wiem, będziesz musiał
zadowolić się

Bardzo potrzebne! Zajęło mi ponad pół godziny, żeby zobaczyć, co do cholery zrobiłem źle ze swoimi znacznikami. Jakie style nadużyłem? To też powinno być domyślne.
kushalvm

3
Ale jest przestarzały
Akash Yellappa

1
Zaktualizowałem rozwiązanie, aby to odzwierciedlić. Trochę smutne: P
simonDos

57

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


4
więc jestem zobowiązany do dodania pasków przewijania do obu? czy nie ma sposobu, aby po prostu zignorować szerokość pionowego paska przewijania? Dziękuję Ci !
Acemad

Nie ma sposobu, aby zignorować to, czego jestem świadomy, ale to, co powiedziałem, działa na ucztę @ Rockr90
Hive7

@ d3c0y to prawda i wspomniałem o tym w odpowiedzi, ale jest to najłatwiejsza metoda. Nie wiem, czy to się zmieniło w ciągu ostatnich 3 lat
Hive7

@aks. zmusza przeglądarkę do myślenia, że ​​można przewijać, więc umożliwia przewijanie paska i przewijanie y jest bocznym przewijaniem
Hive7

1
overflow-y: scroll; doda / pokaże pasek przewijania we wszystkich rzutniach, nawet jeśli nie ma elementów przewijalnych.
Abhilash

35

Prawdopodobnie

html {
    width: 100vw;
}

jest właśnie tym, czego chcesz.


1
To zadziałało świetnie w moim przypadku: gist.github.com/bmcminn/1ab50da18bde75f39bc88e8292a5a847 Używam calc()do określenia szerokości głównego widoku zawartości, tak aby stała nawigacja poza ekranem mogła zajmować lewą stronę ekranu na pulpicie, a wszystko to przy zachowaniu natywnych przewiń na telefonie komórkowym.
bmcminn

3
Bawiłem się paskami przewijania przez ostatnie 36 godzin. Miałem kilka różnych rozwiązań, które działały, ale powodowały inne problemy. Jest to pierwsze rozwiązanie, które zarówno działa, jak i pozwala na użycie normalnego paska przewijania w innym miejscu. Dziękuję Ci.
koszerny

Nie ma za co! Ale majstrowanie przy htmlszerokości w vws jest trochę hakerskie , więc zachowaj ostrożność!
Neurotransmitter

To działało świetnie, czy ktoś może wyjaśnić, jak to działa?
Zeus

1
Rozwiązanie nie jest złe, ale może dodać przewijanie w poziomie.
FDisk

18

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.


9
Nie publikuj identycznych odpowiedzi na wiele pytań. Opublikuj jedną dobrą odpowiedź, a następnie zagłosuj / oflaguj, aby zamknąć pozostałe pytania jako duplikaty. Jeśli pytanie nie jest powtórzeniem, dostosuj swoje odpowiedzi do pytania.
Paul Roub

To powinno działać, ale nakładka nie jest jeszcze standardowa i nie jest obsługiwana we wszystkich przeglądarkach.
Zia Ul Rehman Mughal

Szybka czkawka: w Safari spowodowało to zatrzymanie przewijania strony
joshfindit

13

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!


5
Jest to dość ryzykowne i nie rozwiązanie dla wielu przeglądarek, chociaż stackoverflow.com/questions/9251354/…
Alex Pyzhianov

4

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


3

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.


To dobre rozwiązanie, jednak pracuję nad responsywną witryną za pomocą Bootstrap i ważne jest, aby zautomatyzować szerokość i wszystko, co powiesz?
Acemad

no chyba, że ​​(w kolejności malejącego prawdopodobieństwa) albo: ktoś wymyśli, jak sprawić, by moja druga odpowiedź zadziałała (z dopełnieniem lub marginesem); możesz w jakiś sposób użyć zapytań o media, aby selektywnie zastosować dopełnienie; lub css są implementowane w nowoczesnych przeglądarkach w celu wybiórczego stosowania dopełnienia. Myślę, że najlepszy jest tylko stały pasek przewijania lub używanie JS do wykrywania paska przewijania
Hashbrown

1

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

chrome devtools pokazujące niezmienione wypełnienie

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!


3
Szerokość paska przewijania może się zmieniać w zależności od używanego systemu operacyjnego i przeglądarki. Może mierzyć zarówno 20 pikseli, jak i 40
pikseli

2
cóż, użyłbyś maksimum wszystkich możliwych wartości
Hashbrown

1
Niektóre urządzenia / przewijanie przeglądarki systemu operacyjnego nie mają nawet szerokości.
Sergey Goliney

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


0

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

0

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;
}
Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.