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)?
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)?
Odpowiedzi:
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;
}
overflow-y
? Jak się wydaje, -moz-scrollbars-vertical
jest to przestarzałe na rzecz overflow-y
nieruchomości.
html
za trochę hack-y , zauważ, że możesz użyć strukturalnego pseudo-selektora :root
zamiast html
. Zobacz: developer.mozilla.org/en-US/docs/Web/CSS/:root
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.
-webkit-appearance: none;
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 HTML
lub 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%; }
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ą.