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

Jaki CSS jest wymagany, aby pionowy pasek przewijania przeglądarki był widoczny, gdy użytkownik odwiedza stronę internetową (gdy strona nie ma wystarczającej zawartości, aby uruchomić aktywację paska przewijania)?

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

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.

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

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.

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

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

Zamiast tego używam:

body { min-height:101%; }

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

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

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

body { 
    min-height: 101vh; 
} 

działa najlepiej dla mnie

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.