Horizontal Scroll. Czym jest? Po co go stosować?

Jeśli zaintrygował Cię efekt horizontal scroll’a i jesteś ciekawy/a jak go użyć we własnym projekcie to w tym wpisie dowiesz się wszystkiego. Zapraszam!

Czego się dzisiaj dowiesz?

Dzisiaj opiszę czym jest horizontal scroll i jak go użyć w projekcie. W ogóle nie wymaga on użycia JavaScript jest więc interesującym i ‘lekkim’ dodatkiem. Warto się nim conajmniej zainteresować i dodać to swojej listy umiejętności 🙂

Efekt ten zaimplementuje różnymi metodami.

Czym jest horizontal scroll?

Jest to efekt który powoduje, że po użyciu scroll na myszce, touchpadzie czy ekranie urządzenia mobilnego przeglądarka nie przewija się standardowo w górę lub w dół tylko na boki 🙂 Żeby to sobie lepiej wyobrazić można sprawdzić np. tą stronę poniżej:

https://demos.onepagelove.com/html/ethereal/

Należy też postawić granicę między scrollowaniem (ruchem palca/dłoni) na boki i w dół/górę. W zasadzie większość urządzeń poza konwencjonalnymi myszkami ze scrollem umożliwia użycie tych dwóch metod. Horizontal scroll na którym nam dzisiaj zależy powinien umożliwić na przewinięcie strony w bok przy ruchu w dół/górę ale wcześniej wyjaśnię też jak można podejść do przewijania na boki ruchem w bok. Przykład u góry obsługuje obie metody.

Po co go stosować?

Bo czasem ta funkcjonalność może być użyteczna! O ile wypadku większych wyświetlaczy typu desktop czy laptop jest to zabieg w zasadzie czysto estetyczny idący w parze np. z wizją Designera to w urządzeniach mobilnych może mieć to już sens. Czasem łatwiej po prostu przejrzeć daną galerię szybkim ruchem w bok niż wchodzić w kolejne zakładki lub klikać na strzałki zmieniające zdjęcia.

 

Koniec wywodów. Czas na kod 🙂

Horizontal Scroll

Poniżej przedstawię cztery niezależne metody każda trochę inna ale wszystkie osiągane tylko przy użyciu CSSa. Za każdym razem będzie przykład z Codepena.

Pierwsze trzy metody to scroll na boki natomiast czwarta to horyzontalny scroll za pomocą ruchu góra/dół.

Horizontal scroll ruchem w bok.

Metoda 1 – Sztywny kontener.

Na początku napiszemy sobie markup w HTML. Będzie to prosty kontener w którym będzie kilka obiektów. Niech to wygląda np. tak:

See the Pen QQeGJN by Bart (@bedekodzic) on CodePen.

<body>
    <section class="horizontal">
        <img class="item" src="https://aml-prod-cdn.azureedge.net/aml-prod-sitefinity-custom/images/default-source/models/vanquish/vanquish_03_asset_01.jpg?sfvrsn=2ad6bf9_2&w=1080&quality=60" alt="" class="image">
        <img class="item" src="https://aml-prod-cdn.azureedge.net/aml-prod-sitefinity-custom/images/default-source/models/db11/db11_05_asset_019b9d02b9cf8b697fbc60ff00000f1b3f.jpg?sfvrsn=ab166bf9_2&w=1080&quality=60" alt="" class="image">
        <img class="item" src="http://cdn.astonmartin.com/sitefinity-dealerwebsites/uk/vanquish-s-ultimate_mobile.jpg?sfvrsn=0" alt="" class="image">
        <img class="item" src="https://res.cloudinary.com/carsguide/image/upload/f_auto,fl_lossy,q_auto,t_cg_hero_large/v1/editorial/2018-Aston-Martin-Vantage-coupe-Silver-1200x800-%284%29.jpg" alt="" class="image">
        <img class="item" src="https://car-images.bauersecure.com/pagefiles/77782/1040x0/21-aston-martin-vantage.jpg?scale=down" alt="" class="image">
        <img class="item" src="https://www.thesun.co.uk/wp-content/uploads/2018/01/dd-composite-aston.jpg?strip=all&quality=100&w=750&h=500&crop=1" alt="" class="image">
    </section>
</body>

Jest to galeria pięknych aut- Aston Martinów. Cuda…

No i prosty CSS:

body{
    background-color: darksalmon;
}

.horizontal{
    height: 80%;
    width: 3500px;
}

.item{
    height: 300px;
    padding: 1%;
}

Chodzi o to, że tworzymy kontener który jest zdecydowanie szerszy niż wyższy i wrzucone są do niego inne elementy. Całość tworzy jeden element który nie mieści się na ekranie i trzeba przewinąć w bok aby zobaczyć co jest dalej. Można powiedzieć, że efekt horizontal scrolla jest osiągnięty.

Sztywne ustawianie szerokości często może być niepraktyczne więc przejdźmy do kolejnej metody…

Metoda 2- White-Space

W tym wypadku nie będziemy ustawiali sztywnego kontenera nadrzędnego a wszystko dopasuje się automatycznie do zawartości. Taki CSS:

body{
    background-color: darksalmon;
}

.horizontal{
    height: 80%;
    overflow-x: scroll;
    overflow-y: hidden;
    white-space: nowrap;
}

.item{
    height: 300px;
    padding: 1%;
    display: inline-block;
}

Co tu się dzieje? Chowamy scroll w osi Y za pomocą   overflow-y: hidden; a umożliwimy kontenerowi przewijanie w bok overflow-x: scroll;. Teraz ustawimy jak mają się zwijać elementy podrzędne. Chodzi nam o to aby się nie zawijały (np. <spam> ma taką naturalną właściwość) i robi się to za pomocą white-space: nowrap;. Elementy podrzędne same ładnie się dopasują do kontenera.

See the Pen ddxNOE by Bart (@bedekodzic) on CodePen.

Metoda 3- Flexbox

Trzecia metoda. Równie prosta jak pozostałe:

body{
    background-color: darksalmon;
}

.horizontal{
    height: 80%;
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
}

.item{
    height: 300px;
    padding: 1%;
    flex: 0 0 auto;
}

Zasadniczo dwie ostatnie metody są podobne. Nie będę tutaj tłumaczył użycia flexboxa jako takiego lecz podobno jest on lepiej wspierany przez przeglądarki niż white-space.

See the Pen zRgNLe by Bart (@bedekodzic) on CodePen.

Ale co zrobić, żeby działo się to samo po przesunięciu palcem/scrollem do góry/dołu? Bo przecież to jest sednem całego ćwiczenia?

Horizontal scroll ruchem w dół/górę.

Metoda 4- Rotacja

Teraz czas na mięso tego wpisu 🙂 Aby osiągnąć pożądany efekt będziemy… Obracać cały kontener! Oszukamy przeglądarkę!

Kod do tego wygląda następująco:

body{
    background-color: darksalmon;
    height: 100vh;
}

.horizontal{
    width: 100vh;
    height: 100vw;
    overflow-y: auto;
    overflow-x: hidden;
    transform: rotate(-90deg) translateY(-100vh);
    transform-origin: right top;
}

.item{
    height: 250px;
    width: 400px;
    padding: 100px;
    transform: rotate(90deg);
    transform-origin: right top;
}

Teraz opis:

1. Blokujemy okno przeglądarki przez ustawienie wysokości naszej strony na 100% wysokości okna. W ten sposób przy skrolowaniu w dół nie będzie przesunięcia w dół. Robimy to używając jednostek vh. W tym wypadku bodyheight:100vh. O co chodzi? Jednostki vh i vw (height i width) są znakomitym sposobem na pozbycie się zbędnego JavaScriptu jeśli chcemy określić szerokość i wysokość przeglądarki. Wystarczy dać kontenerowi wymiary height:100vh i width:100vw a będzie on miał rozmiar 100% okna przeglądarki.

Czym się różni od ustawień 100% i 100%? Bo % to wartości względne a vh i vw reprezentują konkretny wymiar np. 100px x 300px po prostu zapisany nieco inaczej.

2. Tworzymy kontener zawierający elementy i go rotujemy o -90deg. Tutaj trzeba nieco wyobraźni bo zmieniają nam się kierunki 🙂 Dajemy kontenerowi wysokość równą szerokości ekranu a szerokość równą wysokości 🙂 Wymiar ustawiamy na 100v żeby zajął całe okno.

Jako punkt odniesienia obrotu ustawiamy right top czyli górny-prawy róg. Cały kontener obraca się i otrzymujemy przesunięcie w prawo. Należy to zniwelować poprzez przesunięcie wzdłuż osi Y. Dodajemy translateY(-100vh) aby przesunąć okno o 100% wysokości przeglądarki. Polecam pobawić się z parametrami.

Na końcu ustawiamy odpowiednio skrole za pomocą overflow.

3. Kiedy kontener główny jest gotowy to zabieramy się za nasze elementy czyli w tym wypadku zdjęcia. Dajemy im wymiary i oczywiście… rotujemy o 90deg 🙂 Potem style według uznania.

W praktyce wygląda to tak:

See the Pen PQMpGO by Bart (@bedekodzic) on CodePen.

Dodatkowy komentarz

Metoda rotacji może budzić kontrowersje. Nie zawsze może się też zachowywać jak moglibyśmy się spodziewać na urządzeniach mobilnych. No ale…

Dobrze zaimplementowany horizontal scroll może być atrakcyjnym dodatkiem do projektu. Każdy przypadek jest indywidualny i podane rozwiązania nie zawsze się sprawdzą dlatego warto eksperymentować 🙂

Sam pracuję nad czymś używającym tego efektu. Mi się to podoba i trochę się tym jaram ale jeszcze nie pokażę. Jeszcze nie gotowe…

Uważam, że bardzo dużą zaletą tych podejść jest brak jakiegokolwiek JavaScriptu. Znacząco przyśpiesza to działanie.

Podsumowanie

Horizontal scroll to łatwa metoda na osiągnięcie efektu który może być nie tylko użyteczny ale też robić wrażenie na użytkownikach. Ważna jest tylko przemyślana implementacja co dla wprawnego oka i prężnej głowy jest tylko kwestią czasu. Więc drogi czytelniku, nie powinno to być dla Ciebie trudnością 🙂


Bartek Cis

Piszę dla was tego bloga bo lubię aplikacje internetowe. Mogę je projektować, kodować a potem o nich pisać czując dreszczyk ekscytacji za każdym razem gdy trafię na coś nowego. Bo uczymy się całe życie. Prawda?
  • Piotr Ścigała

    Funkcja przewijania w poziomie może poprawić użyteczność naszego serwisu na urządzeniach mobilnych, zwiększyć jego funkcjonalność.

    Ale zamiast zwrotu „czasem ta funkcjonalność może być użyteczna” powinno pojawić się „czasem ta funkcja może być użyteczna”, bo funkcjonalność to zbiór funkcji i usług systemu, jego przydatność i ergonomiczność

    Apeluję, żebyśmy używali naszych słów zgodnie z ich znaczeniem i nie powielali błędnych kalek językowych z angielskiego 🙂

    https://sjp.pl/funkcjonalność