Ostatnia aktualizacja 30 stycznia, 2024
Właściwość overflow w CSS umożliwia kontrolę sposobu wyświetlania treści wychodzącej poza granice elementu, oferując różne opcje, takie jak przewijanie, ukrywanie czy automatyczne dostosowanie. Poniżej prezentujemy przykłady kodu dla konkretnych sytuacji.
CSS overflow – podstawy
Właściwość overflow określa, co dzieje się z treścią, która nie mieści się w obrębie elementu. Ma kilka wartości:
visible: Domyślna wartość; treść wychodzi poza element.hidden: Ukrywa treść wystającą poza element.scroll: Dodaje paski przewijania, niezależnie od tego, czy są potrzebne.auto: Dodaje paski przewijania tylko wtedy, gdy są potrzebne.
Przykładowy kod z zastosowaniem jednej z wartości wygląda następująco:
.box {
width: 200px;
height: 200px;
overflow: scroll;
}Overflow w poziomie i pionie
Można osobno kontrolować przewijanie w pionie (overflow-y) i poziomie (overflow-x). Poniżej przykład kodu obrazujący wspomniane sytuacje:
.box-vertical {
width: 100%;
height: 200px;
overflow-y: scroll;
}
.box-horizontal {
width: 200px;
height: 100%;
overflow-x: scroll;
}Praktyczne zastosowanie CSS overflow w interfejsach
Overflow jest szczególnie użyteczny w interfejsach użytkownika, w których przestrzeń jest ograniczona, np. w menu bocznym czy okienkach dialogowych.
Przykładowy kod dla takiej sytuacji:
.dialog {
width: 300px;
height: 150px;
overflow: auto;
}Takiego kodu używa się do stylizowania okien dialogowych, okienek informacyjnych lub innych kontenerów na stronie internetowej, gdzie treść może być zmienna i czasami przekraczać przewidziane dla niej miejsce. Dzięki overflow: auto;, użytkownik może łatwo przewinąć i zobaczyć całą treść, jeśli jest to potrzebne, jednocześnie zachowując estetykę i wymiary określone przez projektanta.
Dalsza część tekstu znajduje się pod materiałem wideo:
Zaawansowane techniki łączenia overflow z innymi właściwościami
Można łączyć overflow z innymi właściwościami CSS, np. position, display, aby uzyskać bardziej skomplikowane efekty.
.custom-scroll {
width: 250px;
height: 250px;
overflow: auto;
position: relative;
}Tego kodu używa się do tworzenia kontenerów z treścią, która może być większa niż przestrzeń, jaką ma zajmować kontener. Paski przewijania zapewniają dostęp do całej treści, gdy jest to potrzebne, a pozycjonowanie względne umożliwia łatwe manipulowanie położeniem elementu w stosunku do innych elementów na stronie.
width: 250px;ustawia szerokość elementu na 250 pikseli. To oznacza, że zewnętrzna szerokość elementu zostanie ograniczona do 250 pikseli, niezależnie od zawartości wewnątrz niego.height: 250px;ustawia wysokość elementu na 250 pikseli. Podobnie jak w przypadku szerokości, oznacza to, że zewnętrzna wysokość elementu będzie równa 250 pikselom.overflow: auto;kontroluje, co dzieje się z treścią, która nie mieści się w ustalonych wymiarach elementu (250×250 pikseli). Wartośćautopowoduje, że przeglądarka dodaje paski przewijania tylko wtedy, gdy treść przekracza określone wymiary elementu. Jeśli cała treść mieści się w obrębie elementu, paski przewijania nie będą widoczne.position: relative;ustawia pozycjonowanie elementu na względne (relative). To znaczy, że element będzie pozycjonowany względem jego normalnego położenia w dokumencie. Pozycjonowanie względne pozwala na przesunięcie elementu za pomocą właściwościtop,right,bottom,leftwzględem jego początkowej pozycji, bez zmiany położenia innych elementów na stronie. Pozycjonowanie względne jest także ważne, gdy używamy elementów potomnych z pozycjonowaniem absolutnym (position: absolute;), ponieważ wtedy te elementy potomne będą pozycjonowane względem najbliższego elementu pierwotnego z pozycjonowaniem innym niż statyczne (np. względne).
Dziękujemy, że przeczytałaś/eś nasz artykuł. Obserwuj EnterTheCode.pl w Wiadomościach Google, aby być na bieżąco.
Czytaj także:
