Infinite horizontal scroll – czyli jak przewijać w poziomie

Infinite horizontal scroll – czyli jak przewijać w poziomie

Dzisiaj chciałbym się podzielić czymś co w środowisku programistów określane jest jako „infinite horizontal scroll”. Podstawowym założeniem było uzyskanie efektu nieskończonego przewijania strony w poziomie. Do przygotowania tego efektu zainspirowało mnie portfolio pana Andersa Drage.

Jak działa infinite horizontal scroll?

Wyobraź sobie, że masz kilkanaście elementów ułożonych obok siebie, jeden po drugim. Co zrobić aby po przewinięciu do ostatniego elementu znów pojawił się pierwszy? Okazuje się, że wystarczy na początku sklonować wszystkie elementy a później na odpowiednim zdarzeniu zmieniać tylko ich położenie.

Ponieważ zależało mi aby skrypt obsługiwał touchpady, wykorzystałem plugin jQuery MouseWheel. Przy każdej zmianie wartości scrollLeft następuje detekcja kierunku – lewo lub prawo oraz momentu osiągnięcia ostatniego elementu. Kluczem do zrozumienia tego przykładu jest wyobraźnia.

Poniższy rysunek obrazuje to co dzieje się z klonem elementów w momencie dotarcia do prawej krawędzi:

W momencie dotarcia do prawej krawędzi wartość scrollLeft jest ustawiana na 0. Elementy podstawowe wyrzucane są poza widoczny obszar ekranu. Elementy wcześniej sklonowane są ustawiane w pozycji, w której nastąpiło zdarzenie – tzn. w pozycji końcowej elementów podstawowych. Wykonaliśmy tutaj niezauważalny dla oka przeskok. Te właśnie przeskoki pozwalają stworzyć efekt nieskończonego przewijania.

Czas również obsłużyć przewijanie w lewo. Poniżej prezentuję analogiczny schemat działania w przypadku osiągnięcia lewej krawędzi:

Odpowiednio dla tej sytuacji zmienia się położenie elementów podstawowych i sklonowanych oraz wartość scrollLeft ustawiana jest na maksimum.

Zachęcam do przeglądania demo a także kodu źródłowego i wspólnego rozwijania swoich umiejętności. Nie po raz pierwszy i nie ostatni pokazuję, że na pozór trudne zadanie, można zrealizować w dość prosty sposób.


Newsletter

Maksymalnie raz w miesiącu dostaniesz powiadomienie o nowych wpisach.
Zapisz się do newslettera — ja nie śmiecę.

Ta strona wykorzystuje pliki cookies wyłącznie w celach statystycznych.