Czasami projekt strony zakłada ograniczenie obszaru, na którym będzie wyświetlała się treść. Najczęściej wynika to ze względów estetycznych, ale co zrobić, gdy nagle okazuje się, że treści jest tyle, że z całą pewnością wyjdzie poza zakładany obszar? Oczywiście użyć overflow:auto. A co zrobić, żeby zamiast brzydkiego, domyślnego scrollbara pojawił się ładny i elegancki scrollbar? Użyć jScrollPane.

Zacznijmy od początku. Przede wszystkim stwórzmy sobie jakiś kontener o określonych wymiarach i wlejmy do niego jakiś tekst w języku majów. Niech to będzie div o szerokości 200px i wysokości 250px:

<div id="content">
    	Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean vulputate volutpat turpis, eu varius dolor pharetra id. Duis a mauris ac tellus dapibus porta non sit amet urna. Vivamus et turpis odio, a placerat sem. Maecenas tellus nulla, mattis et porta eget, lacinia ullamcorper lorem. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aenean quis quam nulla. In nec lectus dui, ut auctor elit. Vestibulum sit amet orci id lectus aliquam eleifend. Morbi arcu nulla, lobortis ac dignissim sit amet, porttitor ullamcorper nisi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Etiam mi massa, blandit ut sagittis vel, malesuada ac nibh. Pellentesque ante eros, viverra a placerat ut, tincidunt eu purus. Nulla adipiscing neque non dui varius adipiscing. Sed fringilla ligula nec nunc placerat et convallis erat dapibus. Quisque adipiscing lacinia turpis, a sollicitudin ligula venenatis ut.
</div>
#content {
	width:200px;
	height:250px;
}

Jak widać tekst jest dość przydługawy (jak wszystkie starożytne modlitwy) i wylewa się poza ramy naszego diva. Niedobrze. Możemy oczywiście ustawić mu height:auto;, żeby rozciągał się w dół, ale przecież nie o to chodzi. Chodzi o to, żeby tekst wyświetlać w kontenerze o określonych rozmiarach, dlatego użyjemy właściwości overflow.

Spróbujmy naszemu divowi nadać overflow:auto i zobaczmy co się stanie:

#content {
     width:200px;
     height:250px;
     overflow:auto;
}

Tekst nie wylewa się już poza diva, za to po prawej stroni pojawił się tzw. scrollbar, za pomocą którego możemy przewijać zawartość diva. Właśnie o takie rozwiązanie nam chodziło, jest jednak jedno „ale” – scrollbar jest nieestetyczny. Wygląda paskudnie- to fakt. Chyba nikt nie zaprzeczy, a ponieważ scrollbara nie da się zmienić inaczej niż za pomocą Java Script, użyjemy fajnego skryptu autorstwa Kevina Lucka – jScrollPane.

Użycie tego skryptu jest stosunkowo proste. Przede wszystkim musimy podpiąć bibliotekę jQuery i sam skrypt – w tym celu przed zamknięciem znacznika body (tak, tak, moi mili – nie w sekcji head tylko w bodyoto dlaczego) umieszczamy odnośniki do skryptów (jScrollPane można ściągnąć tutaj):

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script>
<script src="jquery.jscrollpane.min.js" type="text/javascript"></script>

Kolejna sprawa to podpięcie arkusza stylów, który zamieni brzydkiego scrollbara w ładnego scrollbara. Na początek podłączmy domyślny arkusz, dostępny tutaj, a potem zobaczymy, co możemy z nim zrobić. Póki co umieśćmy w sekcji head odnośnik do arkusza domyślnego:

<link type="text/css" href="jquery.jscrollpane.css" rel="stylesheet" media="all" />

Pora na umieszczenie magicznego kodu, który dopełni reszty formalności:

$(function()
{
	$('#content').jScrollPane();
});

Ups… Coś nie wyszło. Wszystko dlatego, że nasz tekst został umieszczony w jednym kontenerze, a żeby skrypt działał, należy umieścić do w dwóch, natomiast powyższy skrypt musi odwoływać się do najbardziej zewnętrznego. Zmieńmy zatem nieco naszego htmla:

<div id="content">
    	<div>
    		Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean vulputate volutpat turpis, eu varius dolor pharetra id. Duis a mauris ac tellus dapibus porta non sit amet urna. Vivamus et turpis odio, a placerat sem. Maecenas tellus nulla, mattis et porta eget, lacinia ullamcorper lorem. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aenean quis quam nulla. In nec lectus dui, ut auctor elit. Vestibulum sit amet orci id lectus aliquam eleifend. Morbi arcu nulla, lobortis ac dignissim sit amet, porttitor ullamcorper nisi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Etiam mi massa, blandit ut sagittis vel, malesuada ac nibh. Pellentesque ante eros, viverra a placerat ut, tincidunt eu purus. Nulla adipiscing neque non dui varius adipiscing. Sed fringilla ligula nec nunc placerat et convallis erat dapibus. Quisque adipiscing lacinia turpis, a sollicitudin ligula venenatis ut.
		</div>
    </div>

Teraz wszystko gra – brzydki scrollbar został zastąpiony ładnym scrollbarem, a przynajmniej – ładniejszym. Spróbujmy go jednak nieco zmienić, bo zakładam, chyba słusznie, że niewiele osób będzie naprawdę zainteresowanych korzystaniem z wyglądu zaproponowanego przez autora skryptu. Przyjmijmy, że chcę, aby mój scrollbar wyglądał tak jak na obrazku obok.

Przede wszystkim będę potrzebował czterech obrazków – pierwszego, drugiego, trzeciego i czwartego. Pierwsze dwa obrazki to oczywiście góra i dół uchwytu do przesuwania treści, obrazek trzeci to środek tegoż uchwytu – ten obrazek w naszym wypadku powinien mieć wysokość kontenera (250px), ponieważ na jego środku widnieją trzy „zgłębienia”. Gdyby nie one wystarczyłby nam pasek o wysokości piksela rozciągnięty wzdłuż osi Y. Ostatni obrazek to kwadrat o wymiarach 1px x 1px, który będziemy powielać na osi Y, a który będzie linią, po której będziemy przeciągać nasz uchwyt.

Do dzieła – kto używa Firebuga ten wie, że klasy, które powinny nas zainteresować to: .jspDrag, .jspDragTop, .jspDragBottom, .jspTrack. Jak widać autor skryptu pomyślał o wszystkim, a i nazwy klas są dość intuicyjne. Pominę tłumaczenie, która odpowiada za co, bo to wyjdzie w praniu. Skupmy się na CSSie:

.jspDrag {
	background:url(button_mid.png) no-repeat center;
}

.jspDragTop {
	width:16px;
	height:8px;
	background:#fff url(button_top.png) no-repeat top;
}

.jspDragBottom {
	width:16px;
	height:8px;
	position:absolute;
	bottom:0;
	background:#fff url(button_btm.png) no-repeat top;
}

.jspTrack {
	background:#fff url(track.png) repeat-y top center;
}

Tak zdefiniowane klasy zmieniają oblicze naszego scrollbara całkowicie, a my otrzymujemy wreszcie pożądany efekt. Opisując pokrótce cały proces – najpierw ustawiliśmy tło dla głównego diva .jspDrag. Wewnątrz ów diva znajdują się dwa kolejne, dzięki którym możemy naprawdę dowolnie kształtować wygląd naszego uchwytu. Obu divom ustawiliśmy odpowiednie parametry tła, przy czym w przypadku diva .jspDragBottom zastosowaliśmy jeszcze jeden trick – wiedząc, że jego rodzic ma ustawione pozycjonowanie relatywne (position:relative) i że on sam ma się wyświetlać zawsze na dole uchwytu, ustawiliśmy mu position:absolute i bottom:0. Na koniec divowi .jspTrack również ustawiliśmy odpowiednie parametry tła.

Oczywiście zwracam uwagę, że pożądany wygląd można bylo również osiągnąć w inny, łatwiejszy sposób – za pomocą CSS i właściwości border-radius (rzecz jasna nie dla IE), ale chodziło bardziej o zaprezentowanie możliwości.

W sumie to wszystko – nasz div ma swoje wymiary, tekst nam się nie wylewa a w dodatku mamy ładnego scrollbara. Ktoś powie – no ok, ale zanim strona się załaduje wraz ze wszystkimi skryptami przez moment widać tego starego, brzydkiego scrollbara. Owszem, można temu zaradzić, ale sposób, który przychodzi mi do głowy nie jest godny webdevelopera dbającego o usability strony, więc go nie zdradzę. Kombinujcie sami, jeśli faktycznie wam to przeszkadza.

Tutaj kompletnie poskładany przykład.

P.S. Ostatni miałem problem ze skryptem w IE7 w połączeniu z najnowszą wersją biblioteki jQuery. Rozwiązaniem okazało się użycie starszej wersji biblioteki. Gdyby ktoś doświadczył podobnych problemów, to polecam przesiadkę. Napisałem maila w tej sprawie do Kevina Lucka – dam znać, jak coś ustalę.

Podobne wpisy: