Sprawienie, że główny pasek przewijania będzie zawsze widoczny


Odpowiedzi:


333
html {
    overflow: -moz-scrollbars-vertical; 
    overflow-y: scroll;
}

Dzięki temu pasek przewijania jest zawsze widoczny i aktywny tylko w razie potrzeby.

Aktualizacja: Jeśli powyższe nie działa, wystarczy użyć tego.

html {
    overflow-y:scroll;
}

3
Czy masz pojęcie, dla jakiej wersji FF wprowadzono obsługę overflow-y? Jak się wydaje, -moz-scrollbars-verticaljest to przestarzałe na rzecz overflow-ynieruchomości.
Ionuț G. Stan

Myślę, że Internet Explorer 6.x +, Firefox 1.5+, jeśli dobrze pamiętam. Korzystam z powyższego kodu i działa on dla mnie w FF1.5-3.5.1 i IE6-8.
Corv1nus

2
Czy istnieją jakieś alternatywy dla „przeskakiwania strony”, gdy niektóre strony w Twojej witrynie są zbyt małe, aby mieć pasek przewijania, a inne są? Czy jest to „najlepsza praktyka”? Muszę przyznać, że nie widzę wielu stron w sieci, które nie zajmują całej strony.
Jess

2
Nie jestem pewien, czy jest to najlepsza praktyka, ale posiadanie pasków przewijania na wszystkich stronach i aktywne tylko w razie potrzeby, aby uniknąć przeskakiwania stron, jest zwykle akceptowalnym rozwiązaniem. Wolę stały pasek przewijania niż skok.
Corv1nus

1
Dla tych (jak ja), którzy uważają stylizację htmlza trochę hack-y , zauważ, że możesz użyć strukturalnego pseudo-selektora :rootzamiast html. Zobacz: developer.mozilla.org/en-US/docs/Web/CSS/:root
Rounin

30

Upewnij się, że przepełnienie jest ustawione na „przewijanie”, a nie „auto”. Powiedziawszy to , w OS X Lion przepełnienie ustawione na „przewijanie” zachowuje się bardziej jak auto, ponieważ paski przewijania będą nadal wyświetlane tylko podczas używania. Więc jeśli jakiekolwiek z powyższych rozwiązań nie wydaje się działać, może to być powód.

Oto, co musisz to naprawić:

::-webkit-scrollbar {
  -webkit-appearance: none;
  width: 7px;
}
::-webkit-scrollbar-thumb {
  border-radius: 4px;
  background-color: rgba(0, 0, 0, .5);
  -webkit-box-shadow: 0 0 1px rgba(255, 255, 255, .5);
}

Możesz odpowiednio go stylizować, jeśli nie podoba Ci się domyślny.


1
To działa! Ale jak możesz zrobić to tylko na konkretnym divie?
Bogaty

@Rich jak każdy inny element css. .twoj :: :: - webkit-scrollbar {...}
Kris,

@Kris Cześć, dziękuję za odpowiedź, oto jej przykład. stackoverflow.com/a/54667091/2637261
Rich

Dlaczego jest używany-webkit-appearance: none;
Suraj Jain

To jest świetne! Powinna być zaakceptowana odpowiedź.
Cyberpunker

25

W ostatnich latach sytuacja się zmieniła. Powyższe odpowiedzi nie są już aktualne we wszystkich przypadkach. Apple pcha wszędzie znikające paski przewijania . Safari, Chrome, a nawet Firefox na MacO (i iOS) pokazują paski przewijania tylko podczas przewijania - nie wiem o bieżącym Windows / IE. Istnieją jednak niestandardowe sposoby stylizowania pasków przewijania w pakiecie Webkit (IE dawno temu zrezygnowało).


ale poniża się z gracją właśnie na tych nowych?
Ben

3
Dzięki za ten doskonały punkt na znikających paskach przewijania. Dla mnie powodem, dla którego pasek przewijania był widoczny, było uniknięcie tego lekkiego, ale bardzo zauważalnego i bardzo denerwującego szarpnięcia, gdy zawartość zmienia się z przewijania na brak. Z znikającymi paskami przewijania nie szarpią ciała, gdy pokazują się i chowają, więc dla mnie jest ok. Ale dziękuję za ten doskonały punkt.
Noitidart

4
Z punktu widzenia UX, większość razy chcemy, aby pasek przewijania był widoczny. Zgodnie z bieżącym trendem, jeśli pasek przewijania nie jest widoczny, dodatkowym krokiem jest „wypróbowanie” widocznej listy, aby uzyskać więcej na liście. Dodatkowa wizualna wskazówka, że ​​lista rozwijana lub lista zawiera więcej elementów, nie jest potrzebna, jeśli ludzie zobaczą pasek przewijania.
windsurf88

24
html {
    overflow-y: scroll;
}

Czy tego chcesz?

Niestety, Opera 9.64 wydaje się ignorować tę deklarację CSS po zastosowaniu do HTMLlub BODY, chociaż działa dla innych elementów na poziomie bloku, takich jak DIV.


13
html {height: 101%;}

Używam tego rozwiązania dla różnych przeglądarek (uwaga: zawsze używam deklaracji DOCTYPE w 1. linii, nie wiem, czy to działa w trybie quirksmode, nigdy jej nie testowałem ).

To zawsze pokaże AKTYWNY pionowy pasek przewijania na każdej stronie, pionowy pasek przewijania będzie przewijany tylko z kilku pikseli.

Gdy zawartość strony jest krótsza niż widoczny obszar przeglądarki (port podglądu), nadal będziesz widzieć aktywny pionowy pasek przewijania i będzie przewijany tylko z kilku pikseli.

Jeśli masz obsesję na punkcie sprawdzania poprawności CSS (mam obsesję na punkcie sprawdzania poprawności HTML), korzystając z tego rozwiązania, Twój kod CSS sprawdziłby również W3C, ponieważ nie używasz niestandardowych atrybutów CSS, takich jak -moz-scrollbars-vertical


1
Eleganckie rozwiązanie
Artur Keyan

12

body { height:101%; } spowoduje „przycięcie” większych stron.

Zamiast tego używam:

body { min-height:101%; }

1
To pytanie zostało zadane 5 lat temu i ma już zaakceptowaną odpowiedź. Twoja odpowiedź nie zapewnia lepszej odpowiedzi niż odpowiedź już zaakceptowana.
Dipen Shah,

18
Ta odpowiedź zawiera dodatkowe informacje, których nie podano w innych odpowiedziach.
GaTechThomas,

2

Udało mi się to uruchomić, dodając go do tagu body. Był dla mnie milszy, ponieważ nie mam nic na elemencie HTML.

body {
    overflow-y: scroll;
}

2

Alternatywnym podejściem jest ustawienie szerokości elementu HTML na 100vw. W wielu, jeśli nie w większości przeglądarek, neguje to wpływ pasków przewijania na szerokość.

html { width: 100vw; }

0

Ustawienie wysokości na 101% jest moim rozwiązaniem problemu. Strony nie będą już „migać” podczas przełączania między stronami, które przekraczają wysokość rzutni, a tymi, które tego nie robią.


0
body { 
    min-height: 101vh; 
} 

działa najlepiej dla mnie


0

Robię to:

html {
    margin-left: calc(100vw - 100%);
    margin-right: 0;
}

Więc nie muszę patrzeć na brzydki, szary pasek przewijania, kiedy nie jest potrzebny.


Pytanie wymaga, aby zawsze było widoczne.
Corv1nus
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.