Jak TO - Ukryj pasek przewijania
Dowiedz się, jak ukryć paski przewijania za pomocą CSS.
Jak ukryć paski przewijania
Dodaj overflow: hidden;
, aby ukryć zarówno poziomy, jak i pionowy pasek przewijania.
Przykład
body {
overflow: hidden; /* Hide scrollbars */
}
Aby ukryć tylko pionowy pasek przewijania lub tylko poziomy pasek przewijania, użyj overflow-y
lub overflow-x
:
Przykład
body {
overflow-y: hidden; /* Hide vertical scrollbar */
overflow-x: hidden; /* Hide horizontal scrollbar */
}
Zauważ, że overflow: hidden
usunie to również funkcjonalność paska przewijania. Nie ma możliwości przewijania strony.
Wskazówka: aby dowiedzieć się więcej o overflow
właściwości, przejdź do naszego samouczka CSS Overflow lub Opis właściwości CSS overflow .
Ukryj paski przewijania, ale zachowaj funkcjonalność
Aby ukryć paski przewijania, ale nadal móc przewijać, możesz użyć następującego kodu:
Przykład
/* Hide scrollbar for Chrome, Safari and Opera */
.example::-webkit-scrollbar {
display: none;
}
/* Hide scrollbar
for IE, Edge and Firefox */
.example {
-ms-overflow-style: none; /*
IE and Edge */
scrollbar-width: none; /* Firefox */
}
Przeglądarki Webkit, takie jak Chrome, Safari i Opera, obsługują niestandardowy ::-webkit-scrollbar
pseudoelement, który pozwala modyfikować wygląd paska przewijania przeglądarki. IE i Edge obsługują tę -ms-overflow-style:
właściwość, a Firefox obsługuje tę scrollbar-width
właściwość, co pozwala nam ukryć pasek przewijania, ale zachować funkcjonalność.