Blog

Horizontalni skrol u responsive dizajnu

Većina developera u današnje vreme obavezno koristi neki front-end framework, koju je unapred prilagodjen mobile ready rešenju. Što znači da će se svi elementi na strani priladodjavati širini ekrana korisnika, a developer će unapred koristiti pripremljene CSS klase koje će mu u tome pomoći.

Problem nastaje kada klijent zahteva nešto što samim frameworkom nije predvidjeno, onda je potrebno uloziti dodatni trud i napraviti nešto novo što će se uklopiti u postojeće rešenje.

Evo jedan primer kako da jednostavno rešimo horizontalni skrol Pošto znamo da su širine elemenata u responsive dizajnu  odredjene u procentima i da se u zavisnosti od širine ekrana na taj način i prilagodjavaju.Na koji način onda elementu dodati horizontalni skrol i dozvoliti da se elementi unutar tog elementa slazu jedan pored drugog.

<div class="overflow-element">
    <img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=350&h=150">
    <img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=350&h=150">
    <img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=350&h=150">
    <img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=350&h=150">
    <img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=350&h=150">
    <img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=350&h=150">
    <img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=350&h=150">
    <img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=350&h=150">
    <img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=350&h=150">
    <img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=350&h=150">
</div>
.overflow-element {
    box-sizing:border-box;
    border: 13px solid #0088cc;
    overflow-x: auto;
    overflow-y: hidden;
    margin:20px;
}

Kada postavimo ovakvu markaciju dobićemo  prikaz kao što je na slici ispod, element će iimati 100% sirinu ali elementi unutar njega ce se jednostavno slagati jedan ispod drugog, 

I ako smo elementu dodali sirinu od 100% i properti  overflow-x: auto; nismo uspeli da postignemo skrol na elementu, da smo elementu zadali fiksnu širinu, skrol bi se pojavio, ali zbog različitih rezolucija ekrana ne zelimo da širinu 'zakucavamo' .

Da bismo ovo rešili moramo dodati novi properti elementu, koji se zove white-space. Properti white-space kontroliše na koji način će se tekst prikazivati, da li će se prelomiti, postaviti u sledeči red itd.Iako je u početku bio predvidjen samo za tekst, njegovu stilizaciju nasleđuju i drugi elementi.

.overflow-element {
    border: 13px solid #0088cc;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    box-sizing:border-box;
    margin:20px;
}

Posle dodavanje dodavanja propertija white-space, Uspećemo da postignemo zeljeni efekat  i skrol će se pojaviti

 Detaljnije o propertiju white-space mozete pogledati na sledećim adresama

  1. https://css-tricks.com/almanac/properties/w/whitespace/
  2. http://www.w3schools.com/cssref/pr_text_white-space.asp

Rešenje koje ne zahteva previše posla a daje zeljeni efekat u responsive dizajnu 

Podelite ovaj članak