Svislý posuv div. Vytvoření div s vertikálním rolováním pomocí CSS
3. Vynutit vertikální a horizontální rolování v bloku CSS
4. Příklad bloku div s rolováním
V tomto článku se podíváme na problematiku vytváření bloku (div) pevné velikosti s možností horizontálního i vertikálního rolování. To lze implementovat pomocí CSS. Zodpovědný za to přepadová vlastnost.
O užitečné vlastnosti přetečení
Vlastnictví přetékat je zodpovědný za zobrazení obsahu prvku bloku. Lze použít, když obsah zcela nezapadá a přesahuje oblast bloku.přetečení-x- odpovídá za horizontální zobrazení obsahu prvku bloku.
přetečení-y- odpovídá za vertikální zobrazení obsahu prvku bloku.
CSS kód
Prokrutka (
přetečení: auto; /* vlastnost pro horizontální rolování. Automaticky, pokud je obsah větší než blok */
}
vlastnosti a hodnoty přetečení
viditelné- zobrazí se celý obsah prvku i mimo nastavenou šířku.skrytý- zobrazí se pouze oblast uvnitř prvku, zbytek je skrytý.
svitek- násilně přidá vodorovný (y) nebo vodorovný (x) posuvník.
auto- pokud je blok menší, automaticky se přidá vodorovný posuvník.
Zvažte příklad třídy CSS. V šířce a výšce nastavíme šířku a výšku bloku, který potřebujeme (obsah bloku je nepřekročí), a pomocí vlastnosti overflow: auto; v případě potřeby nastavte horizontální rolování
CSS kód
Prokrutka (
šířka:150px; /* šířka našeho bloku */
výška:100px; /* výška našeho bloku */
přetečení: auto; /* vlastnost pro horizontální rolování. Automaticky, pokud je více než jeden blok */
}
Vynutit posouvání v bloku CSS
Můžete také vynutit posouvání, aby odpovídalo výšce a šířce. K tomu každá osa: overflow-y: scroll; (vertikální) overflow-x: scroll; (horizontální) určete parametr rolování, vynutíte rolování.HTML a CSS kód
Prokrutka (
výška:150px; /* výška našeho bloku */
pozadí: #fff; /* barva pozadí, bílá */
ohraničení: 1px plný #C1C1C1; /* velikost a barva ohraničení bloku */
}
Příklad rolování div
HTML a CSS kód
A je tam spousta, spousta různých textů a dalších informací. A je tam spousta, spousta různých textů a dalších informací. A je tam spousta, spousta různých textů a dalších informací. A je tam spousta, spousta různých textů a dalších informací. A je tam spousta, spousta různých textů a dalších informací. A je tam spousta, spousta různých textů a dalších informací. A je tam spousta, spousta různých textů a dalších informací. A je tam spousta, spousta různých textů a dalších informací.
Jedna z vlastností přetékat lze odstranit, pak bude rolování pouze po jedné ose, což je docela dost.
Podívejte se na scénář v akci Například níže.
Vlastnost přetečení řídí zobrazení obsahu prvku bloku, pokud se celý obsah nevejde a přesahuje oblast zadaných rozměrů.
stručné informace
Označení
| Popis | Příklad | |
|---|---|---|
| <тип> | Označuje typ hodnoty. | <размер> |
| A && B | Hodnoty musí být na výstupu v uvedeném pořadí. | <размер> && <цвет> |
| A | B | Označuje, že musíte vybrat pouze jednu z navržených hodnot (A nebo B). | normální | malokapitálky |
| A || B | Každá hodnota může být použita samostatně nebo společně s jinými v libovolném pořadí. | šířka || počet |
| Hodnoty skupin. | [ plodina || přejít ] | |
| * | Opakujte nula nebo vícekrát. | [,<время>]* |
| + | Opakujte jednou nebo vícekrát. | <число>+ |
| ? | Zadaný typ, slovo nebo skupina je volitelná. | vložka? |
| (A, B) | Opakujte alespoň A, ale ne více než Bkrát. | <радиус>{1,4} |
| # | Opakujte jednou nebo vícekrát odděleně čárkami. | <время># |
Hodnoty
viditelné Zobrazí celý obsah prvku, dokonce i za zadanou výškou a šířkou. skryté Zobrazí se pouze oblast uvnitř prvku, zbytek bude skrytý. posuvné posuvníky jsou vždy přidány. automatické posuvníky se přidávají pouze v případě potřeby.
Pískoviště
Medvídek Pú se vždy nebránil malému občerstvení, zvláště v jedenáct dopoledne, protože v té době snídaně dávno končila a oběd ještě nezačal. A samozřejmě měl hroznou radost, když viděl, že Králík vyndává hrnky a talíře.
div ( výška: 80px; přetečení: auto; )
Příklad
Heterogenní modrý gel
Konduktometrie jemně zprostředkovává elektronickou metodu získávání bez ohledu na důsledky pronikání methylkarbiolu dovnitř.
Výsledek tohoto příkladu je znázorněn na Obr. 1.
Rýže. 1. Použití vlastnosti přetečení
Objektový model
Objekt.styl.přetečení
Poznámka
Internet Explorer až do verze 7.0 včetně:
- relativně umístěné podřízené prvky, jejichž hodnoty přetečení jsou nastaveny na auto nebo scroll, se chovají, jako by měly pozici: pevnou .
Internet Explorer 8:
- Kombinace přetečení s hodnotou posouvání s vlastnostmi max-height a float může vést k chybějícím prvkům webové stránky a zobrazení prázdné obrazovky v prohlížeči.
- U bloku, který má vlastnosti float a overflow nastavené na scroll , se šířka zadaná pomocí vlastnosti max-width ignoruje.
- Výška bloku s vodorovným posuvníkem se zvyšuje o výšku posuvníku, i když podle specifikace CSS musí uvedené rozměry zahrnovat i posuvníky.
Firefox 3.6 správně neaplikuje přetečení na skupiny buněk tabulky ( ,
, ).Specifikace
Každá specifikace prochází několika fázemi schvalování.
- Doporučení – Specifikace byla schválena W3C a je doporučena jako standard.
- Doporučení kandidáta ( Možné doporučení) - skupina odpovědná za standard je spokojena, že splňuje své cíle, ale vyžaduje pomoc od vývojářské komunity při implementaci standardu.
- Navrhované doporučení Doporučené doporučení) - v této fázi je dokument předložen poradní radě W3C ke konečnému schválení.
- Working Draft – Vyspělejší verze návrhu, která byla prodiskutována a upravena pro komunitní recenzi.
- Předloha editora ( Redakční návrh) - návrhová verze normy po změnách, které provedli redaktoři projektu.
- Koncept ( Návrh specifikace) - první verze návrhu normy.
Od autora:článek našeho hosta Petera Businessmanse. Peter je front-end vývojář ve společnosti Audience, kde rád píše styly v SCSS. Dnes nám ukáže to, čemu říkám poctivý CSS trik. Celý web je vertikální. Čtete web jako běžnou knihu: zleva doprava, shora dolů. Ale někdy se chcete zbavit vertikality a udělat něco bláznivého: vytvořit horizontální seznam. Nebo ještě bláznivější, horizontální web!
Bylo by hezké, kdybychom mohli udělat něco takového:
/* falešný kód */ div (směr posouvání: horizontální; )
/* falešný kód */ div( směr rolování: horizontální; |
To se bohužel nestane. To se v CSS ani neplánuje.
To je škoda, protože společnost, pro kterou pracuji, by to opravdu využila. Děláme spoustu prezentací a prezentace je poměrně horizontální záležitost. Poměr stran snímků je obvykle 4:3 nebo 16:9. Z tohoto důvodu máme trvalý problém s horizontálními snímky a vertikálními webovými technologiemi. Tím „my“ myslím já. Ale co miluji, jsou výzvy.
Další případ použití
Napadl mě konkrétní způsob aplikace. Myšlenka je taková, že pro zákazníky by bylo vhodné zobrazit všechny produkty na jednom snímku. Katalog produktů by se přirozeně nevešel do jedné formy. Proto jsme se rozhodli rozdělit katalog do tří kategorií, každou s horizontálním rolováním. V každé kategorii jsou tak viditelné tři nejoblíbenější produkty, zatímco méně důležité produkty jsou snadno dostupné.
Metoda bez JavaScriptu
Všichni víme, že existuje mnoho způsobů, jak provádět horizontální rolování v JS. Existuje několik příkladů CSS-triků. Zajímalo by mě, zda by tato myšlenka mohla být implementována pomocí čistého CSS. Řešení se ukázalo jako velmi jednoduché:
vytvořit kontejner s prvky;
otočte nádobu o 90 stupňů proti směru hodinových ručiček tak, aby spodní okraj byl vpravo;
Prvky uvnitř kontejneru otočíme zpět na jejich místo.
Krok 1) vytvořte kontejner
Vytvořte div s mnoha dětmi.
V našem příkladu bude rolovací kontejner široký 300px a bude mít 8 prvků 100x100px. Velikosti jsou libovolné, nastavit můžete libovolné.
< div class = "horizontální rolovací čtverce"> < div >položka 1< / div > < div >položka 2< / div > < div >položka 3< / div > < div >položka 4< / div > < div >položka 5< / div > < div >položka 6< / div > < div >položka 7< / div > < div >položka 8< / div > < / div > |
Výška kontejneru se stane šířkou a naopak. Níže bude „šířka“ kontejneru 300 pixelů:
Horizontal-scroll-wrapper ( šířka: 100px; výška: 300px; overflow-y: auto; overflow-x: skryté; )
šířka: 100px; výška: 300px; přetečení - y : auto ; přetečení - x : skryté ; |
A podřízené prvky:
Horizontal-scroll-wrapper > div ( šířka: 100px; výška: 100px; )
Vodorovně - posouvání - obal > div ( šířka: 100px; výška: 100px; |
Krok 2) otočte nádobu
Nyní musíme kontejner otočit o -90 stupňů pomocí vlastnosti transformace CSS. Máme horizontální scroller.
Horizontal-scroll-wrapper ( ... transformace: rotace (-90 stupňů); transformace-origin: vpravo nahoře; )
Horizontální - rolování - obal ( . . . transformace: rotace(-90deg); |
Je tu jen jeden malý problém: podřízené prvky se otočily spolu s kontejnerem.
Krok 3) vraťte podřízené prvky zpět na jejich místo
Jak tedy vrátit prvky na jejich místo? Vraťte jej zpět pomocí vlastnosti transformace CSS.
Horizontal-scroll-wrapper > div ( ... transformace: rotace (90 stupňů); transformace-origin: vpravo nahoře; )
Vodorovně - posouvání - obal > div ( . . . transformace: otočit (90 stupňů); transform - origin : vpravo nahoře ; |
Krok 4) Pevné umístění
Všechno vypadá dobře, ale je tu pár problémů.
Otočili jsme kontejner a nastavili pravý horní roh jako kotvu, což způsobilo posunutí levé strany na šířku kontejneru. Pokud je pro vás obtížné si to představit, stačí položit prst na pravý horní roh stránky a otočit ji. Exit: musíte to vrátit zpět pomocí vlastnosti translate.
Už lepší. Ale první prvek stále není viditelný, protože stejný problém je pozorován u podřízených prvků. To lze opravit tak, že prvnímu podřízenému prvku přiřadíte horní okraj s hodnotou jeho šířky nebo transformací všech prvků jako kontejner. Nejjednodušší způsob, který jsem našel, je přidat do kontejneru horní výplň, která se rovná šířce podřízených prvků, čímž se vytvoří nárazníková zóna pro prvky.
Kompatibilita
Zkontroloval jsem kompatibilitu na zařízeních, která mám k dispozici.
plocha počítače
Protože styl posuvníku v současnosti funguje pouze v prohlížečích Webkit/Blink, ve Firefoxu a IE se zobrazuje běžný šedý posuvník. To lze opravit pomocí JS a jejich úplným skrytím, ale to je téma na jinou lekci.
Posouvání kolečkem myši funguje na ploše skvěle. Ale můj notebook má na tuto věc svůj vlastní názor. Na zařízeních s dotykovými obrazovkami a touchpady se ukázka chová, jako by se div vůbec neotáčel.
Mobilní zařízení
Byl jsem příjemně překvapen, když jsem se dozvěděl, že Android rozpozná otočení kontejneru a umožní vám posouvat přejetím doleva a doprava.
S iOS naopak není vše tak plynulé. Prohlížeč se chová, jako by kontejner nebyl vůbec otočen. Pro posouvání je tedy potřeba přejíždět nahoru a dolů, což je docela zvláštní. Přetečení: skryté neřeší problém.
Závěr
Podle webu Can I Use nyní transformace v CSS podporuje 93 %+ uživatelů (v době psaní tohoto článku, listopad 2016). Tady by neměl být problém.
I když je lepší tuto metodu při výrobě nepoužívat. Testoval jsem to na některých zařízeních, ale ne na všech a ne tak důkladně.
Největším problémem jsou dotykové vstupy, u kterých je pro pohyb doleva a doprava potřeba přejet prstem nahoru a dolů. Řešením by mohlo být napsat na web zprávu s vysvětlením, ale pak byste se museli spolehnout na to, že si ji přečtou uživatelé. A i tak to bude v rozporu se zdravým rozumem. Dalším řešením je zachytit dotykové vstupy pomocí JS na zařízeních, ale pak je lepší psát vše v JS a zcela opustit náš CSS hack.
V tomto článku podrobně prozkoumáme vlastnost overflow se všemi jejími hodnotami, která také umožňuje přidat nebo odebrat horizontální/vertikální posuvník. Jinými slovy, jak udělat posuvníky.
Přetečení v CSS je zodpovědné za to, jak bude vypadat zobrazení informací v bloku, pokud obsah přesáhne výšku nebo šířku tohoto bloku. Tato vlastnost se vztahuje pouze na prvky bloku (display : block ; nebo ty, které jsou původně prvky bloku - divs atd.).
Možné hodnoty, které tato vlastnost nabývá (ve výchozím nastavení viditelné):
- Viditelný – Zobrazí se celý obsah prvku, a to i mimo zadanou výšku a šířku.
- Skrytý - Zobrazí se pouze oblast uvnitř prvku, zbytek bude skrytý.
- Posouvání – posuvníky jsou vždy přidány.
- Auto – posuvníky se přidávají pouze v případě potřeby.
- Zdědit – Zdědí hodnotu rodiče.
Nejčastěji se tato vlastnost používá k odstranění nebo přidání posuvníků k prvku. Takto si například poradí s rámy, aby je nenacpali do plné velikosti. Nebo vložit nějaký velký text, aby nezabíral půl stránky, ale pohodlně seděl ve speciálním bloku a tam se to dalo posouvat a číst. Nemovitost z velké části řeší problém pohodlného zobrazování informací.
V ukázce můžete vidět, jak každá hodnota nemovitosti funguje v praxi:
HTML kód
viditelné
skrytý
Soudruzi! začátek každodenní práce na formování pozice hraje důležitou roli při formování systémů masové účasti. Závažnost těchto problémů je natolik zřejmá, že neustálý kvantitativní růst a rozsah naší činnosti vyžaduje identifikaci a objasňování nových návrhů. Zpevnění a rozvoj konstrukce tedy představuje zajímavý experiment při testování vývojového modelu. Úkol organizace, zejména nový model organizační činnosti, do značné míry určuje vytvoření systému školení personálu, odpovídá naléhavým potřebám.
Různorodé a bohaté zkušenosti s posilováním a rozvojem struktury nám umožňují vyhodnotit důležitost oblastí progresivního rozvoje. Další rozvoj různých forem činnosti nám tedy umožňuje plnit důležité úkoly při vývoji nových návrhů. Každodenní praxe ukazuje, že realizace plánovaných cílů zajišťuje účast širokého okruhu (odborníků) na utváření pozic zaujatých účastníky ve vztahu k zadaným úkolům. Závažnost těchto problémů je natolik zřejmá, že posílení a rozvoj struktury představuje zajímavý experiment v testování nezbytných finančních a administrativních podmínek. Neustálý kvantitativní růst a rozsah naší činnosti nám tedy umožňuje hodnotit význam forem rozvoje. Ideové ohledy vyššího řádu i rozsah a místo přípravy personálu zajišťují, že se na formování pozic zaujatých účastníky ve vztahu k zadaným úkolům podílí široké spektrum specialistů.
svitek
Soudruzi! začátek každodenní práce na formování pozice hraje důležitou roli při formování systémů masové účasti. Závažnost těchto problémů je natolik zřejmá, že neustálý kvantitativní růst a rozsah naší činnosti vyžaduje identifikaci a objasňování nových návrhů. Zpevnění a rozvoj konstrukce tedy představuje zajímavý experiment při testování vývojového modelu. Úkol organizace, zejména nový model organizační činnosti, do značné míry určuje vytvoření systému školení personálu, odpovídá naléhavým potřebám.
Různorodé a bohaté zkušenosti s posilováním a rozvojem struktury nám umožňují vyhodnotit důležitost oblastí progresivního rozvoje. Další rozvoj různých forem činnosti nám tedy umožňuje plnit důležité úkoly při vývoji nových návrhů. Každodenní praxe ukazuje, že realizace plánovaných cílů zajišťuje účast širokého okruhu (odborníků) na utváření pozic zaujatých účastníky ve vztahu k zadaným úkolům. Závažnost těchto problémů je natolik zřejmá, že posílení a rozvoj struktury představuje zajímavý experiment v testování nezbytných finančních a administrativních podmínek. Neustálý kvantitativní růst a rozsah naší činnosti nám tedy umožňuje hodnotit význam forem rozvoje. Ideové ohledy vyššího řádu i rozsah a místo přípravy personálu zajišťují, že se na formování pozic zaujatých účastníky ve vztahu k zadaným úkolům podílí široké spektrum specialistů.
auto
Soudruzi! začátek každodenní práce na formování pozice hraje důležitou roli při formování systémů masové účasti. Závažnost těchto problémů je natolik zřejmá, že neustálý kvantitativní růst a rozsah naší činnosti vyžaduje identifikaci a objasňování nových návrhů. Zpevnění a rozvoj konstrukce tedy představuje zajímavý experiment při testování vývojového modelu. Úkol organizace, zejména nový model organizační činnosti, do značné míry určuje vytvoření systému školení personálu, odpovídá naléhavým potřebám.
Různorodé a bohaté zkušenosti s posilováním a rozvojem struktury nám umožňují vyhodnotit důležitost oblastí progresivního rozvoje. Další rozvoj různých forem činnosti nám tedy umožňuje plnit důležité úkoly při vývoji nových návrhů. Každodenní praxe ukazuje, že realizace plánovaných cílů zajišťuje účast širokého okruhu (odborníků) na utváření pozic zaujatých účastníky ve vztahu k zadaným úkolům. Závažnost těchto problémů je natolik zřejmá, že posílení a rozvoj struktury představuje zajímavý experiment v testování nezbytných finančních a administrativních podmínek. Neustálý kvantitativní růst a rozsah naší činnosti nám tedy umožňuje hodnotit význam forem rozvoje. Ideové ohledy vyššího řádu i rozsah a místo přípravy personálu zajišťují, že se na formování pozic zaujatých účastníky ve vztahu k zadaným úkolům podílí široké spektrum specialistů.
tělo (margin:0 0 0 0; padding:0 0 60px 0; font-size:16px;) h2 (color:#CC0033;) div ( width:200px; /* pevná šířka */ výška:300px; /* pevná výška */ border:1px solid #555 padding:4px float:left) .VisibleDiv (overflow:visible;) .HiddenDiv (overflow:hidden;).ScrollDiv (overflow:scroll;) .AutoDiv ( overflow:auto;)
Stojí za to věnovat pozornost skutečnosti, že v tomto konkrétním případě mají bloky danou pevnou výšku a šířku. To je důležité, zvažte například možnost, když je výška bloku nastavena na auto:
Vidíme, že text se uvnitř bloku zobrazuje správně ve všech případech, až na malou nepříjemnost v případě scroll , kde se objevují neaktivní posuvníky.
V tomto případě však existuje malé nebezpečí, s nímž mnozí nerozumí, proč vzniklo a jak jej napravit. Faktem je, že pokud blok s přetečením: viditelný; to znamená, že výchozí hodnota a její obsah mají prvky s jakoukoli plovoucí hodnotou kromě none , pak se toto vše zobrazí nesprávně. Abyste pochopili, jaká je tato situace, zvažte příklad:
Pod blokem VisibleDiv je další blok
viditelné
Soudruzi! začátek každodenní práce na formování pozice hraje důležitou roli při formování systémů masové účasti. Závažnost těchto problémů je natolik zřejmá, že neustálý kvantitativní růst a rozsah naší činnosti vyžaduje identifikaci a objasňování nových návrhů. Zpevnění a rozvoj konstrukce tedy představuje zajímavý experiment při testování vývojového modelu. Úkol organizace, zejména nový model organizační činnosti, do značné míry určuje vytvoření systému školení personálu, odpovídá naléhavým potřebám.
Pod blokem VisibleDiv není nic
viditelné
Soudruzi! začátek každodenní práce na formování pozice hraje důležitou roli při formování systémů masové účasti. Závažnost těchto problémů je natolik zřejmá, že neustálý kvantitativní růst a rozsah naší činnosti vyžaduje identifikaci a objasňování nových návrhů. Zpevnění a rozvoj konstrukce tedy představuje zajímavý experiment při testování vývojového modelu. Úkol organizace, zejména nový model organizační činnosti, do značné míry určuje vytvoření systému školení personálu, odpovídá naléhavým potřebám.
tělo (margin:0 0 0 0; padding:0 0 60px 0; font-size:16px;) h2 (color:#CC0033;) p (float:left;) div ( width:500px; height:auto; border: 1px plný #555; okraj: 4px;
V prvním případě je zřejmé, že obsah s vlastností float se pohybuje mimo blok a není zohledněn při určování výšky bloku, ve druhém případě pod blokem s přetečením: viditelný ; Další blok je speciálně umístěn a natřen jinou barvou. Toto nejsou jediné příklady toho, jak se takové bloky mohou chovat na stránce (s přetečením : viditelným ; a výškou : auto ; ). To lze opravit nahrazením viditelné hodnoty za skryté. Pamatujte, že tato vlastnost by měla být zadána pouze pro bloky s výškou: auto; , pokud existuje pevná výška, pak je velká šance, že obsah bude jednoduše skryt, pokud je větší než zadaná výška.
Takto bude vypadat opravená verze:
Také nebudete mít takový problém, pokud má blok přetečení: viditelné ; a výška: auto; je také specifikována nějaká hodnota vlastnosti float. Obecně platí, že v mnoha případech zobrazení prvků závisí spíše na sadě vlastností než na jednotlivých vlastnostech.
Někdy je nutné umístit velký kus textu do malého okna, který se tam úplně nevejde, aby se tento problém vyřešil, je snadné vytvořit vrstvu s rolováním -; div se svitkem.
Bude potřeba
Pevná velikost vrstvy a stylů CSS.
CSS
CSS class.scroll nastavuje parametry 600px na délku a 300px na výšku, padding, border a background color. ALE! Nejdůležitějším parametrem je overflow:auto, který nastavuje posuvník tak, aby se zobrazil, když je množství textu větší než velikost vrstvy.
Posouvání ( šířka:500px; výška:300px; /* je vyžadována pevná velikost */ overflow:auto; /* rolování se zobrazí podle potřeby */ padding:10px 20px; border:#999 1px solid; background-color:#FAFAFA; )
HTML
Výsledek
Na obrazovce uvidíte malý rámeček s textem a šedým okrajem.
Nejpoužívanější jsou etylenglykolová chladiva na bázi etylenglykolu a vody (destilovaná) s komplexem aditiv.
Nemrznoucí směsi se získávají jako vodné roztoky odpovídajících koncentrátů. Během provozu lze kvalitu nemrznoucí směsi řídit hustotou. Během provozu se první věc, která se během provozu odpařuje z chladicí kapaliny, je voda, která by měla být pravidelně doplňována (destilována). Je nutné zajistit, aby se benzín a oleje nedostaly do nemrznoucí směsi, protože způsobují pěnění a uvolňování kapaliny ze systému.
Životnost chladicích kapalin jako „Tosol“ a „Lena“ je omezena trvanlivostí přísad a je obvykle 2 roky; Průměrný nájezd u různých vozů je 50 000 km.
Při prvním servisu ojetého vozidla je třeba vyměnit chladicí kapalinu. Po vypuštění staré kapaliny naplňte systém čistou vodou, nastartujte motor a nechte jej běžet na volnoběh 15-20 minut; poté vypusťte vodu a naplňte systém novou chladicí kapalinou.
