Tworzenie pionowego elementu div z przewijaniem za pomocą CSS. Właściwości przepełnienia CSS (ukryte, widoczne, automatyczne, przewijanie) i ich odmiany do wyświetlania zawartości elementów blokowych

Właściwość overflow steruje wyświetlaniem zawartości elementu blokowego w przypadku, gdy cała zawartość nie mieści się i wykracza poza obszar o określonych wymiarach.

krótka informacja

Oznaczenia

	Opis	Przykład
<тип>	Wskazuje typ wartości.	<размер>
A i B	Wartości muszą być wyprowadzane w określonej kolejności.	<размер> && <цвет>
| B	Wskazuje, że należy wybrać tylko jedną wartość z proponowanych (A lub B).	normalne | kapitaliki
|| B	Każda wartość może być używana niezależnie lub razem z innymi w dowolnej kolejności.	szerokość || liczyć
	Grupuje wartości.	[przytnij || przechodzić ]
*	Powtórz zero lub więcej razy.	[,<время>]*
+	Powtórz jeden lub więcej razy.	<число>+
?	Określony typ, słowo lub grupa jest opcjonalna.	wstawka?
(A, B)	Powtórz co najmniej A, ale nie więcej niż B razy.	<радиус>{1,4}
#	Powtórz jeden lub więcej razy, oddzielając je przecinkami.	<время>#

×

Wartości

widoczny Wyświetla całą zawartość elementu, nawet poza określoną wysokością i szerokością. ukryty Wyświetlany jest tylko obszar wewnątrz elementu, reszta będzie ukryta. scroll Paski przewijania są zawsze dodawane. auto Paski przewijania są dodawane tylko wtedy, gdy jest to konieczne.

Piaskownica

Kubuś Puchatek nie miał nigdy nic przeciwko odrobinie poczęstunku, zwłaszcza o jedenastej rano, bo o tej porze śniadanie już dawno się kończyło, a obiad jeszcze się nie zaczął. I oczywiście był strasznie szczęśliwy, widząc, że Królik wyjmuje kubki i talerze.

div (wysokość: 80px; przepełnienie: auto ; )

Przykład

Wynik tego przykładu pokazano na ryc. 1.

Ryż. 1. Zastosowanie własności przepełnienia

Model obiektowy

Obiekt.styl.przepełnienie

Notatka

Internet Explorer do wersji 7.0 włącznie:

• stosunkowo pozycjonowane elementy potomne, których wartości przepełnienia są ustawione na auto lub scroll, zachowują się tak, jakby miały position:fix.

Internet Explorer 8:

• Połączenie przelewu z przewiń wartość z właściwościami max-height i float może spowodować brak elementów strony internetowej i wyświetlenie pustego ekranu w przeglądarce.
• W przypadku bloku, którego właściwości float i overflow są ustawione na scroll , szerokość określona we właściwości max-width jest ignorowana.
• Wysokość bloku z poziomym paskiem przewijania zwiększa się o wysokość paska przewijania, chociaż zgodnie ze specyfikacją CSS podane wymiary powinien zawierać paski przewijania.

Firefox 3.6 nie stosuje poprawnie przepełnienia do grup komórek tabeli ( , , ).

Specyfikacja

Każda specyfikacja przechodzi przez kilka etapów zatwierdzania.

• Zalecenie – specyfikacja została zatwierdzona przez W3C i jest zalecana jako standard.
• Rekomendacja kandydata ( Możliwa rekomendacja ) - grupa odpowiedzialna za standard jest usatysfakcjonowana, że ​​spełnia swoje cele, ale potrzebuje pomocy społeczności programistów we wdrożeniu standardu.
• Proponowane zalecenie Sugerowane zalecenie) - na tym etapie dokument jest przekazywany Radzie Doradczej W3C do ostatecznego zatwierdzenia.
• Wersja robocza — bardziej dojrzała wersja wersji roboczej, która została omówiona i poprawiona do przeglądu społeczności.
• Szkic redaktora ( Projekt redakcyjny) - wersja robocza normy po wprowadzeniu zmian przez redakcję projektu.
• Projekt ( Projekt specyfikacji) - pierwsza wersja robocza normy.

×

Przyjrzyjmy się, jak reguła przepełnienia CSS (wykorzystująca wartości ukryte, widoczne, przewijane i automatyczne) może kontrolować treść, jeśli nie mieści się ona w zamierzonym obszarze.

W praktyce (podczas układania czy montażu) takie sytuacje często się zdarzają, więc wielu osobom się to przyda. Co więcej, po drodze zajmiemy się odmianami tej nieruchomości overflow-x i overflow-y, które są przypadkiem szczególnym i mają swoje własne cechy. Poruszmy jeszcze kwestię związanej z nią reguły przepełnienia tekstu, która określa sposób widoczności tekstu w bloku wychodzącym poza granice elementu.

Oczywiście w wielu przypadkach nie da się obejść bez określenia konkretnych wymiarów powierzchni za pomocą szerokości i wysokości (szerokość i wysokość bloku), które mogą przyjąć . Ogólnie rzecz biorąc, rozważymy poniżej przykłady działania właściwości przelewu we wszystkich możliwych wariantach.

Przepełnienie (widoczne, ukryte) - widoczna lub ukryta zawartość bloku wykraczająca poza jego granice

Na początek, zgodnie z tradycją, przyjrzyjmy się, jakie wartości obowiązują w tabeli specyfikacji W3C (dane prezentowane są według CSS2.1, choć obowiązują i są obsługiwane w bardziej Nowa wersja CSS3):

Jak widać, przepełnienie ma 4 główne parametry (widoczne, ukryte, automatyczne, przewijanie) i wartość dziedziczenia, którą można przypisać w razie potrzeby, ale domyślnie ta reguła nie jest dziedziczona ( odziedziczone: nie na zrzucie ekranu). Wartość domyślna jest widoczna (początkowa: widoczna).

Przed rozpoczęciem badań z praktyczne przykłady, wyjaśnijmy sobie kilka szczegółów. Jak wspomniano powyżej, reguła przepełnienia pozwala kontrolować zawartość elementu blokowego w przypadkach, gdy nie mieści się on w jego granicach. Wynika to bezpośrednio z tytułu tego artykułu Reguły CSS(przepełnienie w języku angielskim oznacza przepełnienie, nadmiar.)

Z wyprzedzeniem możesz zapoznać się z tym, z czego się składa, klikając podany link. Dodatkowo przydałoby się rzucić okiem na materiał o tym, który nadaje elementom na stronie charakterystykę bloku.

Weźmy jako przykład kontener DIV (więcej o divach jako podstawie układu bloków), pokoloruj go za pomocą tła, poprzez atrybut style i umieść go w środku dowolny tekst:

Ostateczny wynik będzie mniej więcej taki:

Nie zdefiniowaliśmy szerokości kontenera. W tym przypadku, jeśli pamiętasz, element blokowy zajmuje całą dostępną dla niego przestrzeń na szerokość. Ale wysokość bloku, jeśli nie jest określona, ​​jest dokładnie określona przez treść (w naszym przykładzie znajdujący się tam tekst).

Reguła przepełnienia dla bloków zawierających treść, której nie można rozłożyć na wysokość

Powyżej podałem przykład, w którym element blokowy zawiera tekst, który przy ograniczonej szerokości można redystrybuować (poprzez zmianę zawijania słów). Jest to szczególnie prawdziwe teraz, gdy używasz projekt adaptacyjny do oglądania na telefonach komórkowych. Zdarza się jednak, że treść z tego czy innego powodu nie ma takiej elastyczności.

Zacznijmy od tych samych warunków, co w przykładzie, który omówiliśmy powyżej. Jak pamiętacie, podając stałą szerokość bloku, treść została rozłożona w taki sposób, aby nie przekraczała poziomej krawędzi, ale jednocześnie zwiększyła wysokość pojemnika (wraz z zawartością) w pionie. Zmieńmy teraz treść i zamieńmy standardowy tekst na długie słowa bez spacji wskazujących szerokość:

Należy pamiętać, że treść teraz natychmiast przekracza poziome granice, gdy szerokość jest ograniczona. A jeśli napiszemy, że przepełnienie jest ukryte, to w ten sposób odetniemy treść:

Dodanie przewijania za pomocą parametrów scroll i auto reguły przepełnienia

Przyjrzyjmy się teraz przypadkowi, w którym szerokość i wysokość kontenera są stałe, ale wskazane jest pozostawienie zawartości, która się w nim nie mieści, jako dostępną. Weźmy ten sam przykład ze stałą szerokością i wysokością, ale dla przejrzystości ustawimy wartość wysokości na 60 pikseli, dodając przepełnienie:przewiń Do Style CSS:

W rezultacie paski przewijania pojawiły się w pionie i poziomie:

W ten sposób treść staje się dostępna, choć poprzez przewijanie. Należy jednak pamiętać, że powstało nie tylko przewijanie w pionie, które jest potrzebne Pełny widok, ale także poziome, które nie jest aktywne. Jest to cecha wartości przewijania.

Chciałbym zauważyć, że podstawowa reguła stylu ma odmiany w postaci przepełnienia-x i przepełnienia-y, które przyjmują te same wartości (widoczne, ukryte, przewijanie, auto) co podstawowe przepełnienie, tylko określone parametry są zastosowany do zawartości bloków poziomo (x) i pionowo (y).

Reguła przepełnienia tekstu CSS (klip, wielokropek).

Zapoznajmy się teraz z opisaną powyżej modyfikacją właściwości overflow, która pojawiła się jedynie w CSS3. Informacje na ten temat można znaleźć na odpowiedniej oficjalnej stronie (wersja redakcyjna W3C):

Nieruchomość przepełnienie tekstu ma 2 główne znaczenia (klips i elipsa). Działa tylko wtedy, gdy określono przepełnienie i wartość inną niż widoczna. A to, jak pamiętasz, jest parametrem domyślnym, więc style odpowiedniego elementu muszą mieć przepełnienie ukrytym, przewijanym lub automatycznym.

Klip jest wartością domyślną i po prostu przycina tekst. Dlatego zastosujmy przepełnienie tekstu dla naszego DIV z odpowiednimi właściwościami CSS, dodając white-space:nowrap (aby wyłączyć zawijanie słów):

Jak widzisz, wielokropek umożliwia dodanie wielokropka zamiast przyciętego tekstu, sugerującego jego kontynuację. Aby wyciągnąć logiczny wniosek ten przykład, możesz dodać pseudoklasę:hover dla elementu div, który zmienia styl elementu po najechaniu na niego kursorem:

Klasa 1: najechanie (przepełnienie: widoczne; odstęp: normalny;)

Teraz tekst zostanie przycięty, ale jeśli najedziesz na niego myszką, pojawi się on w całości. Możesz to sprawdzić, klikając podany link.

3. Wymuś przewijanie w pionie i poziomie w bloku CSS
4. Przykład przewijania div

W tym artykule przyjrzymy się zagadnieniu tworzenia bloku (div) o stałym rozmiarze z możliwością przewijania w poziomie i w pionie. Można to wdrożyć za pomocą CSS. Odpowiedzialny za to właściwość przepełnienia.

O przydatnej właściwości przepełnienia

Nieruchomość przelewowy odpowiada za wyświetlenie zawartości elementu blokowego. Można go zastosować, gdy treść nie mieści się całkowicie i wykracza poza obszar bloku.

przepełnienie-x- odpowiada za wyświetlanie zawartości elementu blokowego w poziomie.
przepełnienie-y- odpowiada za wyświetlanie zawartości elementu blokowego w pionie.

Kod CSS

Prokrutka (
przepełnienie: automatyczne; /* właściwość przewijania w poziomie. Automatycznie, jeśli zawartość jest większa niż blok */
}

właściwości i wartości przepełnienia

widoczny- wyświetlana jest cała zawartość elementu, nawet poza ustawioną szerokością.
ukryty- wyświetlany jest tylko obszar wewnątrz elementu, reszta jest ukryta.
zwój- na siłę dodaje poziomy (y) lub poziomy (x) pasek przewijania.
automatyczny- dodane automatycznie poziomy pasek przewijanie, jeśli blok jest mniejszy.

Rozważmy przykład klasy CSS. W szerokości i wysokości ustawiamy szerokość i wysokość potrzebnego bloku (zawartość bloku nie będzie poza nie wychodzić), a za pomocą właściwości overflow: auto; w razie potrzeby ustaw przewijanie w poziomie

Kod CSS

Prokrutka (
szerokość: 150 pikseli; /* szerokość naszego bloku */
wysokość: 100 pikseli; /* wysokość naszego bloku */


przepełnienie: automatyczne; /* właściwość przewijania w poziomie. Automatycznie, jeśli jest więcej niż blok */
}

Wymuś przewijanie w bloku CSS

Możesz także wymusić przewijanie, aby dopasować wysokość i szerokość. W tym celu każda oś: overflow-y: scroll; (pionowo) przepełnienie-x: przewijanie; (poziomo) określ parametr przewijania, wymuś przewijanie.

Kod HTML i CSS

Prokrutka (
wysokość: 150 pikseli; /* wysokość naszego bloku */
tło: #fff; /* kolor tła, biały */
obramowanie: 1 piksel #C1C1C1; /* rozmiar i kolor obramowania bloku */


}

Przykład przewijania div

Kod HTML i CSS

Jedna z właściwości przelewowy można usunąć, wówczas będzie przewijanie tylko wzdłuż jednej osi i w zupełności wystarczy.
Zobacz skrypt w akcji Na przykład poniżej.

Od autora: artykuł naszego gościa, Petera Businessmansa. Peter jest programistą front-end w Audience, gdzie lubi pisać style w SCSS. Dziś pokaże nam coś, co nazywam uczciwą sztuczką CSS. Cała sieć jest pionowa. Stronę czyta się jak zwykłą książkę: od lewej do prawej, od góry do dołu. Ale czasami chcesz uciec od pionowości i zrobić coś szalonego: zrobić lista pozioma. Lub jeszcze bardziej szalone, poziome miejsce!

Byłoby miło, gdybyśmy mogli zrobić coś takiego:

/* fałszywy kod */ div (kierunek przewijania: poziomy; )

/* fałszywy kod */ div( kierunek przewijania: poziomy;

Niestety tak się nie stanie. Nie jest to nawet zaplanowane w CSS.

Szkoda, bo firma, w której pracuję, naprawdę by z tego skorzystała. Robimy wiele prezentacji, a prezentacja ma dość horyzontalny charakter. Zazwyczaj współczynnik proporcji slajdów wynosi 4:3 lub 16:9. Z tego powodu mamy ciągły problem ze zjeżdżalniami poziomymi i technologiami wstęgi pionowej. Mówiąc „my” mam na myśli mnie. Ale to, co kocham, to wyzwania.

Kolejny przypadek użycia

Przyszedł mi do głowy konkretny sposób aplikacji. Pomysł jest taki, żeby wygodnie było klientom przeglądać wszystkie produkty na jednym slajdzie. Katalog produktów nie zmieściłby się oczywiście w jednej formie. Dlatego zdecydowaliśmy się podzielić katalog na trzy kategorie, każda z możliwością poziomego przewijania. Dzięki temu w każdej kategorii widoczne są trzy najpopularniejsze produkty, a mniej ważne produkty są łatwo dostępne.

Metoda bez JavaScript

Wszyscy wiemy, że istnieje wiele sposobów przewijania poziomego w JS. Istnieje kilka przykładów na temat sztuczek CSS. Zastanawiałem się, czy ten pomysł mógłby zostać zrealizowany czysty CSS. Rozwiązanie okazało się bardzo proste:

utwórz kontener z elementami;

obróć pojemnik o 90 stopni w kierunku przeciwnym do ruchu wskazówek zegara, tak aby dolna krawędź znajdowała się po prawej stronie;

Obracamy elementy wewnątrz pojemnika z powrotem na swoje miejsce.

Krok 1) utwórz kontener

Tworzyć blok div z wieloma elementy podrzędne.

W naszym przykładzie przewijalny kontener będzie miał szerokość 300 pikseli i będzie zawierał 8 elementów o wymiarach 100 x 100 pikseli. Rozmiary są dowolne, możesz ustawić dowolne.

< div class = „kwadraty z przewijaniem poziomym”> < div >przedmiot 1< / div > < div >pozycja 2< / div > < div >pozycja 3< / div > < div >pozycja 4< / div > < div >pozycja 5< / div > < div >pozycja 6< / div > < div >pozycja 7< / div > < div >pozycja 8< / div > < / div >

Wysokość pojemnika stanie się szerokością i odwrotnie. Poniżej „szerokość” kontenera będzie wynosić 300 pikseli:

Opakowanie przewijane w poziomie (szerokość: 100 pikseli; wysokość: 300 pikseli; przepełnienie-y: auto; przepełnienie-x: ukryte; )

szerokość: 100px; wysokość: 300px; przepełnienie - y: auto; przepełnienie - x: ukryte;

I elementy potomne:

Poziome przewijanie-wrapper > div (szerokość: 100px; wysokość: 100px;)

Poziomo — przewijanie — opakowanie > div ( szerokość: 100px; wysokość: 100px;

Krok 2) obróć pojemnik

Teraz musisz obrócić pojemnik o -90 stopni Pomoc CSS przekształcić właściwości Mamy poziomy scroller.

Opakowanie z przewijaniem poziomym ( ... transformacja: obrót (-90 stopni); początek transformacji: prawy górny; )

Poziomo - przewijanie - owijanie ( . . . transformacja: obrót (-90 stopni);

Jest tylko jeden mały problem: elementy podrzędne obróciły się wraz z kontenerem.

Krok 3) przywróć elementy potomne na swoje miejsce

Jak więc przywrócić elementy na ich miejsce? Odwróć to, używając właściwości CSS transform.

Horizontal-scroll-wrapper > div ( ... transform: obrót (90 stopni); transform-origin: prawy górny; )

Poziomo — przewijanie — opakowanie > div ( . . . transformacja: obrót (90 stopni); transform - pochodzenie: prawy górny;

Krok 4) Ustalone pozycjonowanie

Wszystko wygląda dobrze, ale jest kilka problemów.

Z tego powodu obróciliśmy pojemnik i ustawiliśmy prawy górny róg jako kotwicę lewa strona przesunięty na szerokość kontenera. Jeśli trudno ci to sobie wyobrazić, po prostu połóż palec po prawej stronie górny róg stronę i przewróć ją. Wyjście: musisz to cofnąć, używając właściwości translacji.

Już lepiej. Ale pierwszy element nadal nie jest widoczny, ponieważ ten sam problem obserwuje się w przypadku elementów potomnych. Można to naprawić, nadając pierwszemu elementowi podrzędnemu górny margines z wartością jego szerokości lub przekształcając wszystkie elementy jak kontener. Najprostszym sposobem, jaki znalazłem, jest dodanie górnego wypełnienia do kontenera równego szerokości elementów podrzędnych, tworząc w ten sposób strefę buforową dla elementów.

Zgodność

Sprawdziłem kompatybilność na dostępnych mi urządzeniach.

Pulpit

Ponieważ styl paska przewijania działa obecnie tylko w przeglądarkach Webkit/Blink, w przeglądarkach Firefox i IE wyświetlany jest zwykły szary pasek przewijania. Można to poprawić za pomocą JS i całkowicie je ukryć, ale to temat na inną lekcję.

Przewijanie kółkiem myszy działa świetnie na komputerze stacjonarnym. Ale mój laptop ma w tej kwestii własne zdanie. Na urządzeniach z ekranami dotykowymi i touchpadami demo zachowuje się tak, jakby element div w ogóle nie był obrócony.

Urządzenia mobilne

Byłem mile zaskoczony, gdy dowiedziałem się, że Android rozpoznaje, że kontener został obrócony i pozwala przewijać, przesuwając w lewo i prawo.

Przeciwnie, w iOS wszystko nie jest tak płynne. Przeglądarka zachowuje się tak, jakby kontener w ogóle nie był obracany. Dlatego, aby przewijać, musisz przesuwać w górę i w dół, co jest dość dziwne. Przepełnienie: ukryte nie rozwiązuje problemu.

Wniosek

Według strony internetowej Can I Use transformacje w CSS są obecnie obsługiwane przez ponad 93% użytkowników (w momencie pisania tego tekstu, listopad 2016 r.). Tutaj nie powinno być problemu.

Chociaż lepiej nie stosować tej metody w produkcji. Testowałem to na niektórych urządzeniach, ale nie na wszystkich i nie tak dokładnie.

Najbardziej wielki problem– wejścia dotykowe, w których aby poruszać się w lewo i w prawo, należy przesuwać w górę i w dół. Rozwiązaniem może być napisanie na stronie wiadomości z wyjaśnieniem, ale wtedy trzeba będzie polegać na użytkownikach, którzy ją przeczytają. I nawet wtedy będzie to sprzeczne ze zdrowym rozsądkiem. Innym rozwiązaniem jest przechwytywanie danych dotykowych za pomocą JS na urządzeniach, ale wtedy lepiej jest pisać wszystko w JS i całkowicie porzucić nasz hack CSS.