W tym artykule przedstawiono metodę zapobiegania przepełnianiu treści i włączania przewijania za pomocą CSS.
Jak zatrzymać przepełnianie treści i włączyć przewijanie?
Celem powstrzymania przepełnienia treści jest to, aby treść mieściła się w swoim pojemniku i nie wpływała negatywnie na wydajność witryny. Może łatwo zrozumieć kontekst i może poprawić dostępność dla użytkowników końcowych. Aby uzyskać szczegółowe wyjaśnienie, omówmy na przykładzie:
Krok 1: Włącz przewijanie z przepełnieniem zawartości
Na początku zacznij od utworzenia tabeli w pliku HTML, na której zostanie zastosowany efekt przewijania. Załóżmy, że tabela jest już utworzona i składa się z sześciu wierszy i siedmiu kolumn, a do tabeli podano fikcyjne dane:
< tabela >
< tr >
< cz > Głowa 1 < / cz >
< cz > Głowa 2 < / cz >
< cz > Głowa 3 < / cz >
< cz > Głowa 4 < / cz >
< cz > Głowa 5 < / cz >
< cz > Głowa 6 < / cz >
< cz > Głowa 7 < / cz >
< / tr >
< tr >
< td > Rząd 1 < / td >
< td > Rząd 1 < / td >
< td > Rząd 1 < / td >
< td > Rząd 1 < / td >
< td > Rząd 1 < / td >
< td > Rząd 1 < / td >
< td > Rząd 1 < / td >
< / tr >
< tr >
< td > Rząd 2 < / td >
< td > Rząd 2 < / td >
< td > Rząd 2 < / td >
< td > Rząd 2 < / td >
< td > Rząd 2 < / td >
< td > Rząd 2 < / td >
< td > Rząd 2 < / td >
< / tr >
< tr >
< td > Rząd 3 < / td >
< td > Rząd 3 < / td >
< td > Rząd 3 < / td >
< td > Rząd 3 < / td >
< td > Rząd 3 < / td >
< td > Rząd 3 < / td >
< td > Rząd 3 < / td >
< / tr >
< tr >
< td > Rząd 4 < / td >
< td > Rząd 4 < / td >
< td > Rząd 4 < / td >
< td > Rząd 4 < / td >
< td > Rząd 4 < / td >
< td > Rząd 4 < / td >
< td > Rząd 4 < / td >
< / tr >< tr >
< td > Rząd 5 < / td >
< td > Rząd 5 < / td >
< td > Rząd 5 < / td >
< td > Rząd 5 < / td >
< td > Rząd 5 < / td >
< td > Rząd 5 < / td >
< td > Rząd 5 < / td >
< / tr >
< tr >
< td > Rząd 6 < / td >
< td > Rząd 6 < / td >
< td > Rząd 6 < / td >
< td > Rząd 6 < / td >
< td > Rząd 6 < / td >
< td > Rząd 6 < / td >
< td > Rząd 6 < / td >
< / tr >
< / tabela >
Po wykonaniu powyższego fragmentu kodu strona wygląda następująco:
Dane wyjściowe pokazują, że dane tabeli są w mniej czytelnym formacie, a tabela zajmuje dużo miejsca.
Krok 2: Ustawianie efektu przepełnienia i przewijania
Następnie owiń tabelę rodzicem „
.przelewowy {
szerokość : 200 pikseli ;
wysokość : 200 pikseli ;
przelew-x : automatyczny ;
przelew-y : automatyczny ;
zachowanie przewijania : gładki ;
}
W powyższym fragmencie kodu:
- Po pierwsze, wartość „200px” jest podawana zarówno dla CSS „ szerokość ' I ' wysokość ' nieruchomości. Ustawia rozmiar tabeli, która ma być wyświetlana na stronie internetowej.
- Następnie użyj „ przelew-x ' I ' przelew-y ”, aby umożliwić przewijanie i ustawić „ automatyczny ” do osi X i Y.
- Na koniec ustaw wartość „ gładki ' Do ' zachowanie przewijania ”, aby zapewnić bezproblemową obsługę.
Po wykonaniu powyższego fragmentu kodu strona wygląda następująco:
Strona internetowa pokazuje, że tabela zajmuje teraz mniej miejsca i zapobiega przepełnianiu zawartości. Dodatkowo włączono efekt przewijania.
Notatka : Przez ustawienie ' przelew: auto ' Lub ' przelew: przewiń ”, użytkownicy mogą włączyć przewijanie w przypadku przepełnienia zawartości. Ponadto „ przelew: ukryty ” można użyć, aby całkowicie zapobiec przepełnieniu.
Wniosek
Właściwości „overflow-x” i „overflow-y” służą do kontrolowania przepełnienia i umożliwiają przewijanie w osi poziomej i pionowej. Zapobiega przepełnieniu treści i umożliwia przewijanie w celu stworzenia interaktywnego, responsywnego projektu dla wszystkich urządzeń. W tym artykule pokazano, jak zatrzymać przepełnianie treści i włączyć przewijanie za pomocą CSS.