Vertikálne rolovanie div. Horizontálne rolovanie na čistých CSS

Je vo vnútri vrstvy

- otváranie značky a

Toto je text vo vnútri vrstvy

Zadajte atribút DIV TAG v atribúte štýlu a rolovanie vrstiev tiež:

Tu prepad: Auto, že posúvacie pásy sa zobrazia automaticky, to znamená, keď sa obsah vrstvy nezmestí do určených rozmerov. Ak je Auto nahradené zvitkom, potom budú tieto skupiny vždy prítomné, bez ohľadu na to, či potrebujú alebo nie. A skrytá hodnota poskytne opačnú akciu - nezobrazí sa, aj keď obsah tejto kontajnera nebude viditeľný za jeho okrajmi.

Použite podobnú metódu na pridanie posúvača ako celku. V predvolenom nastavení sa objavujú podľa potreby, ale ak dôvod je potreba ich neustálej prítomnosti, potom by sa mal k zdroju HTML kódu pridať príslušné pravidlo štýlu. Nájdite v kódovej schránke Zatvorenie štítkovej časti dokumentu A pred ním zadajte tieto pokyny štýlu:

V súčasnosti máte naše vlastné webové stránky - nie luxus, ale skôr potrebujú. Jeho vytvorenie si vyžaduje určité HTML zručnosti a vedomosti. Vytvorte jednoduchú stránku je celkom jednoduché. Avšak jeho dekorácia a vytváranie interaktívnych prvkov poskytujúcich dodatočnú funkčnosť stránky spôsobia ťažkosti z začiatočníkov. Jeden z týchto interaktívnych prvkov, ktoré zlepšujú pohodlie návštevníkov stránok - pás zvitok. Je to obzvlášť užitočné v oblastiach stránky, ktoré poskytujú svoje spojenie s skriptmi (interakcia stránky s užívateľmi).

Budete potrebovať

• Internet alebo akýkoľvek html tutoriál

Výučba

Najdôležitejšia vec na akékoľvek - pohodlie. Veľmi predstava o aplikovaní pruhov zvitok Na vašej stránke bude vhodné len vtedy, ak je to diktované, nie do vašej túžby, ale jeho nevyhnutnosť. Urobte rozloženie, na ktorom chcete dať pruh zvitok. Vyberte si miesto pre rolovanie (tak aj nazývané pruhy zvitok).

Vyberte si miesto pre pruhy zvitok Na stránke máte záujem. Musí byť pevne súvisí s akýmkoľvek prvkom (napríklad textovým poľa alebo rozbaľovaciemu zoznamu). Toto miesto musíte vypočítať v pixeloch alebo percentách. Urobte to nie je ťažké, najmä ak má usporiadanie lokality jasnú štruktúru.

Medzi tagmi tela musíte pridať štandardný kód pre rolovanie. Môžete ho nájsť v akomkoľvek návode na HTML. Existujú dve možnosti - buď pridajte tento fragment priamo na kód stránky HTML alebo pripojený k tabuľke CSS štýlov. Druhý spôsob je pohodlnejší, ak sa nezmeníte nie sám, ale celá stránka. Potom musíte zadať farebné parametre pásu zvitokV opačnom prípade bude šedej a nezaujímavá. Obrázok zobrazuje a podpísali prvky zvitku. Parametre musia byť zadané rovnakým spôsobom, ako je znázornené na obrázku, bod čiarky.

Teraz musíte mať vaše zjemnenie. Na pás zvitok Rovnako sa pozrel do všetkých prehliadačov, pozrite sa na hlavný internetový prieskumník, Mozilla Firefox a Opera. Ak je na jednom z nich, vráťte sa do prvej etapy a opravte chyby.

Užitočné rady

Existuje jednoduchý spôsob, ako vytvoriť posuvník pre webovú stránku. Nastavte parameter výšky pre vaše stránky 75%, potom sa zobrazí rolovanie. Je pravda, že jeho farebné schémy stále stojí za to nastaviť.

Zdroje:

• Webová stránka pre začiatočníkov Web Developers v roku 2019

Výučba

Prijať správne rozhodnutie. Kapely zvitok Malo by sa objaviť na vašej stránke len vtedy, ak je to diktované potreba vytvoriť ďalšie pohodlie pre používateľa, a nie výlučne vašimi túžbami. Vytvorte rozloženie stránky, na ktorom budete odoslať pruh zvitok. Vyberte si vhodné miesto pre neho.

Urobte tuhé zvitkové väzby (takže iní môžu byť nazývaní pruh zvitok) K určitému konkrétnemu prvku stránky. Môže to byť textové pole reprezentujúce. Vypočítajte miesto "parkovacích" pruhov v pomere pixelov a percentuálneho podielu. Nebude to vôbec ťažké, ak je stránka jasne štruktúrovaná.

Pridajte štandardný kód pásu zvitok Medzi tagami tela. Ak neviete, o čom hovoríme, sťahujete akýkoľvek návod na rozloženie HTML. Takýto kód bude jasne opísaný. To je najlepšie pre takéto prípady mať hotové šablóny po ruke, takže si môžete vziať nejaké jednotlivé prvky programového kódu odtiaľ, čo výrazne zjednodušuje život. Takže ste našli kód. Umiestnite ho buď priamo na kód stránok alebo ho pripojte k tabuľke CSS, čo je oveľa jednoduchšie, ale v prípade, že sa nezmeníte nie sám, ale všetky stránky stránok.

Nastavte farebné parametre pásu, inak to bude štandardná sivá, ktorá s najväčšou pravdepodobnosťou nebude zapadnúť do dizajnu lokality. Tieto parametre sú špecifikované na rovnakom relácii ako pre akýkoľvek iný grafický prvok stránky. Skúška v niekoľkých prehliadačoch, napríklad Mozile, Opera a Explorer. Ak je v niektorých z nich, opravte chyby programu.

Nastavte parameter výšky lokality na 75%, automaticky sa zadá kód programu pre rolovanie. Ale stále sa musíte zmeniť pruh zvitokA konkrétne - jeho grafické parametre. Toto je opísané v predchádzajúcich odsekoch.

3. Nútená inštalácia vertikálneho a horizontálneho rolovania v bloku CSS
4. Príklad DIV blok s rolovaním

V tomto článku budeme analyzovať vytvorenie bloku (div) pevnej veľkosti s možnosťou rolovania horizontálne a vertikálne. To môže byť implementované spoločnosťou CSS. Pre to odpovedá prepadový majetok.

O užitočnom prepadovom majetku

Nehnuteľnosť prepad. Zodpovedný za zobrazenie obsahu blokového prvku. Môžete použiť v prípade, keď sa obsah úplne nezmestí a presahuje oblasť bloku.

prepad-x. - zodpovedný za zobrazenie obsahu blokového prvku horizontálne.
prepad-y. - zodpovedný za zobrazenie obsahu blokového prvku vertikálne.

CSS kód

Prokrutka (
Prechod: Auto; / * Horizontálne prejdite na vlastnosť. Automaticky, ak je obsah väčší * /
}

Vlastnosti a hodnoty pretečenia

viditeľný - Zobrazí všetky obsah prvku, dokonca aj mimo inštalovanej šírky.
skryté. - Zobrazí sa iba oblasť vo vnútri prvku, zvyšok je skrytý.
zvitok - Horizontálny (Y) alebo horizontálny (X) posuvník je pridaný násilne.
auto. - Horizontálny posuvník sa pridá automata, ak je blok menší.

Zvážte príklad triedy CSS. V šírke a výške, nastavujeme šírku a výšku bloku, ktorú potrebujeme (obsah bloku nebude zverejnený) a vlastnosť prepadov: auto; Žiadame rolovanie horizontálne v prípade potreby

CSS kód

Prokrutka (
Šírka: 150px; / * Šírka nášho bloku * /
Výška: 100px; / * Výška nášho bloku * /


Prechod: Auto; / * Horizontálne prejdite na vlastnosť. Automatické, ak je viac bloku * /
}

Inštalácia nútenej rolovania v bloku CSS

Môžete tiež násilne vytvoriť rolovanie vo výške a šírke. Pre toto, každá os: prepad-y: zvitok; (vertikálne) prepad-x: rolovanie; (Horizontálne) Uveďte parameter rolovania, nútené rolovanie.

HTML a CSS kód

Prokrutka (
Výška: 150px; / * Výška nášho bloku * /
Pozadie: #fff; / * Farba pozadia, biela * /
Hranica: 1px Pevná # C1C1C1; / * Veľkosť a farebný blok * /


}

Príklad DIV blok s rolovaním

HTML a CSS kód

Jedna z vlastností prepad. Môžete odstrániť, potom sa rolovanie zostane len na jednej osi, čo je dosť dosť.
Zobrazenie skriptu úloh napríklad nižšie.

Rozhrania

Použiteľnosť,

Blog SketchBuilder

• Prevod

V poslednej dobe, prístup sa stáva čoraz populárnejší v navrhovaní stránok pomocou horizontálneho rolovania. Sme veľmi znepokojení uskutočniteľnosťou a použiteľnosťou tohto prístupu. Na pochopenie tohto problému sme preniesli článok určený na horizontálny rolovanie. Ponúkame sa oboznámiť sa s materiálom a diskutovať o tejto téme v komentároch ...

Originálne publikačné meno: "Správny súd proti horizontálnemu zvitku"…

Z času na čas je všetko prehodnotené. A preto nie je nič prekvapujúce v tom, že miesta s horizontálnou dispozíciou obsahu sa stávajú módnym. Toto je odvážny a pôsobivý dizajnérsky inovácie, pretože teraz na internete, prevažná väčšina používa vertikálne rolovanie.

Dôvodom popularity prístupu s vertikálnym rolovaním je zrejmé - je ľahšie implementovať, že sa používajú aj často používané. Miesta s vertikálnym rolovaním sa považujú za efektívnejšie. Keďže toto je názor väčšiny, používanie horizontálneho rolovania sa stáva ešte deviantným a odvážne.

Výber "Cesta" horizontálny rolovanie, argumentovať z pozície vlastného výberu. A organizácie, ktoré uprednostnili túto metódu, ohlasujú svoje stránky podľa umeleckého diela.

(http://www.guillaumejuvenet.com/)

Horizontálne lokality sú vyhlásením o svojej vlastnej jedinečnosti a neochotvorenosti, aby sa zmestili do verejného rámca. V dôsledku toho, ochranná známka, ktorá používa takýto dizajn lokality, často zarobí povesť ako "bizarné" a "ucho".

Prečo niektoré používajú horizontálne zvitky

Keďže rolovanie nahor stránok sa stalo tesným pravidlom, mnohí ľudia nebudú na mysli, čo môže byť nejako iné. Počítačové myši so zvitkovým kolesom, zvitkami v touchPads na notebookoch - ešte viac zakorenená táto myšlienka. Webové stránky pomocou horizontálneho rolovania jasne zanedbávajú štandardy štandardných webových stránok, s uvedením jeho individuality.

Stávka na mobilných zariadeniach nemusí byť taký dobrý nápad

Horizontálne rolovanie v smarphotov a tabliet už nie je nové a je pomerne široko používané vďaka svojej jednoduchosti. Jeho použitie na viacerých rôznych zariadeniach je často vysvetlené konzistentnejším znázornením obsahu. Na druhej strane, na stolných počítačoch, horizontálny rolovanie je oveľa menej bežné.

Hlavným dôvodom to bolo už vyjadrené vyššie. Ľudia nevedia, že môžete zobraziť obsah, len rolovanie to nejako inak.

Pretože obrazovky mobilných telefónov alebo tabliet a obrazovky desktopov sa považujú za dostatočne špecifické vo vzťahu k sebe, podobnosť tu nie je použiteľná. Na pracovnej ploche nemôžete používať horizontálne rolovanie, jednoducho, pretože je distribuovaný na tabletách a telefónoch.

Tu sa zásada považuje za zásadu, že ľudia používajú tieto zariadenia s iným prístupom v myslení, a zmena v prijatom pozícii vecí môže viesť k niektorým nedorozumením, pričom užívateľom odchádza mimo ich komfortnej zóny.

Hlavnou nevýhodou pri implementácii horizontálneho rolovania je, že používatelia dávajú prednosť jedinečnom obsahu prezeranie mechaniky na stránke, ale jednotnosť vo webových rozhraniach.

Produktívne využívanie vertikálneho priestoru pre oblasť obsahu

Vo vertikálnom usporiadaní, celý obsah, bez ohľadu na stupeň jeho dôležitosti, ide medzi sebou. Kľúčové informácie môžu byť pridelené iba na konštrukciu a nie sú umiestnené na stránke. Jediná vec, ktorú dizajnér môže umiestniť kľúčové informácie na začiatku stránky.

Na rozdiel od populárnych vertikálnych orientovaných rozložení majú horizontálne rozloženie jednu výhodu. Jemne poskytujú len malú časť informácií v oblasti horizontálneho zvitku. A kľúčové informácie môžu byť upevnené vo vertikálnom priestore, čím sa venovať pozornosť užívateľom nielen s registráciou, ale aj umiestnením.

Keď stojí za to používať horizontálne rolovanie, ak presne chcete

(http://qandhlondon.com/)

Pamiatky s horizontálnym obsahom obsahu sú najvhodnejšie pre situácie, keď potrebujete zobraziť niekoľko objektov: grafické obrázky, malé informačné bloky, ikony skupiny, alebo ukážky, ktoré sa týkajú podrobnejšieho popisu.

Mobilné verzie stránok "Desktop", alebo webové stránky určené na zobrazenie z mobilných zariadení - to je rozsah aplikácie, kde je horizontálny rolovanie úplne vhodný. Je však tiež vhodné a rad iných miest, čo im umožňuje zobrazovať veľké množstvo informácií jednoduchým a výhodným spôsobom.

Problém použiteľnosti

(http://movingislands.com/sk)

Hoci mnohí užívatelia sú dnes známe a dokonca známe horizontálne rolovanie (keď sa všetky vyplnenie zmien stránky), horizontálne rolovanie (s hladkými zaťažením obsahu), mnoho ešte odsudzuje. Naďalej dostáva negatívnu spätnú väzbu od mnohých používateľov, a preto by sa mala používať opatrne. To spravidla sa používa na prejavenie individuality, napríklad vyhlásiť značku. Ale aj s týmto používaním je pre mnohých ľudí nezvyčajné.

Používatelia ignorujú bloky stránok s horizontálnym rolovaním

Jednou z hlavných reakcií, ktoré je horizontálne rolovanie príčiny, je ignorovať sekcie s ním. Vzhľadom k tomu, provokuje výstup používateľa z jeho komfortnej zóny.

Ľudia majú tendenciu ani si všimnúť explicitné tipy na navigácii na webovej stránke s horizontálnym rolovaním, často opúšťajú veľké šípky a iné horizontálne navigačné prvky bez povšimnutia a neporušené.

(http://www.lorenzobocchi.com/)

Týka sa to najmä preto, že táto forma používania nezodpovedá očakávanému funkčnému systému av dôsledku toho nie je prijateľný alebo významný.

Často stránky, kde je stránka úplne vypnutá (podobná papierenské knihy a časopisy), spôsobujú vysoké očakávania od užívateľov, ale neskôr ľudia sú často sklamaní s poskytovaným obsahom. Dobré riešenie pre jedného (tie, ktoré najviac papierové knihy a časopisy) môže poskytnúť inú službu medveďa.

Howler?

(http://www.themobileplaybook.com/en-us/#/overview)

Čo by som mal urobiť, ak stále chcete implementovať horizontálne rolovanie na vašich stránkach a nestrácajte používateľov? Všetko je naozaj jednoduché pridanie ďalších navigačných schopností.

Pridajte ponuku na mechanik horizontálne rolovanie, ktoré umožní nielen presunúť z jednej časti na druhý, ale tiež skočiť niektoré časti vôbec. Tým prinesie flexibilitu a inšpiruje väčší počet používateľov, aby ste si mohli prezerať svoje časti, o ktoré máte záujem.

Horizontálny posuvník je tiež povinný ukázať, koľko je obsah ešte ponechaný. Niekedy motivuje ľudí, aby čítali o niečo viac, keď sa už zhromaždili, aby opustili stránku.

Čo by sa malo zohľadniť

(http://www.richard-hill.org.uk/)

Hoci pomer k používaniu horizontálnych rolovacích rolovanie pomaly sa mení s príchodom nových technológií, ako sú zmyslové obrazovky, tablety, počítače vo forme frakcie monoblokov s dotykovým displejom atď., Táto metóda stále nevenuje.

V analógových klávesniciach je ľahšie manipulovať s tlačidlami "nahor / nadol" ako "vpravo / vľavo". Ale na TouchPad, pridanie nových gest bude pohodlnejšie pri implementácii horizontálneho rolovania.

Rýchla rýchlosť by mala byť tiež optimalizovaná. Príliš rýchle rolovanie môže spôsobiť bolesť hlavy, a príliš pomaly môže byť veľmi nepríjemné.

Napriek tomu, že sme zvyknutí na čítanie zľava doprava, pomaly rolovanie stránky dole, tento zvyk sa teraz mení. S príchodom elektronických kníh a rôznymi aplikáciami pre smartfóny, tablety a touchpad, ľudia sa postupne používajú na otáčanie pri čítaní. Je však vždy dôležité vziať do úvahy, potom s ktorými sa používatelia môžu stretnúť pri zavádzaní nových konceptov v každodennom živote.