scroll wihout scrollbar

[ markalauskas @ 12.06.2008. 15:53 ] @

treba mi mogucnost scrolovanja unutar div boxa (ne u iframe-u!), ali da se ne vidi scrollbar. Vidjao sam to ali sad ne mogu da se setim ni jedne stranice. Znaci jednostavno skrolovanje preko tockica na misu kad se nalazis iznad tog div boxa.

[ Aleksandar Ružičić @ 12.06.2008. 20:20 ] @

evo napisao sam jedan mali jQuery plugin za to

edit: okacio sam scrollarea.min.js - minimizovana verzija plugina (nju koristi na sajtu s obzirom da je samo 0.9 KiB a scrollarea.js ti je source pa mozes da vidis sta plugin radi tj ako te interesuje - jednostavno je mnogo)

[ markalauskas @ 13.06.2008. 13:51 ] @

Hvala puno, nisam stigao ranije da odgovorim. Probacu ga sto pre. Da li bi ovo isto moglo ali da kada scrolujes ide "smooth". Znaci da ne skace text nego klizi na dole ili gore.

PS. kako da ovo primenim na odgovarajuci div?? Nisam bas poznavaoc JS.

[ Aleksandar Ružičić @ 13.06.2008. 13:53 ] @

pa moze mada ne vidim kako ti "skace" text... mislim moze da se ubaci animacija, nije nikakav problem.. aj za nekih pola sata cu to da uradim (da zavrsim ovo na cemu sad radim pa cu to)

[ Aleksandar Ružičić @ 13.06.2008. 14:47 ] @

hmm, sad kad pogledam animacija i nije bas tako jednostavna, tj napravi vise problema nego sto resi...

a ako hoces "smoother" skrolovanje samo promeni scrollBy parametar.

evo kako da primenis to na div koji ti treba (i kako da podesis scrollBy parametar):

- dodas tom divu neki id (ili class ako imas vise takvih divova), recimo <div id="myScrollableDiv">
- u css-u podesis tom divu sledece:

Code:

#myScrollableDiv
{
width: 300px;
height: 400px;
}

tj odredis mu velicinu

- dodas ona tri js fajla na stranu:

Code:

<script type="text/javascript" src="js/jquery-1.2.6.min.js"></script>
<script type="text/javascript" src="js/jquery.mousewheel.min.js"></script>
<script type="text/javascript" src="js/scrollarea.js"></script>

- dodas js koji poziva scrollarea plugin:

Code:

<script type="text/javascript">
    $(function()
    {
        $('#myScrollableDiv').scrollarea();
    });
</script>

i to je to

e sad, ako si tom divu dodelio klasu, recimo <div class="myScrollableDivs">, onda ce kod izgledati malo drugacije: $('.myScrollableDivs').scrollarea();

a scrollBy parametar prosledjujes scrollarea f-ji, recimo da hoces da se scrolluje za 5px:

Code:

<script type="text/javascript">
    $(function()
    {
        $('#myScrollableDiv').scrollarea(5);
    });
</script>

ukoliko ne prosledis taj parametar plugin ce detektovati line-height ili font-size (ukoliko line-height nije brojna vrednost - sto je slucaj sa ie-om ukoliko nisi eksplicitno naveo taj stil) i na osnovu toga odrediti visinu linije i skrolovace liniju po liniju.

znaci ako hoces smoother samo podesi scrollBy parametar da bude manji od visine linije...

[ Barbara_MV @ 25.06.2008. 15:28 ] @

Ne znam za markalauskas-a, ali meni je ovo super resilo problem.....

[ markalauskas @ 25.06.2008. 20:58 ] @

Ma nisam jos stigao da ga ubacim, ali trebalo bi i meni da zavrsi...
Hvala Aleksandre.

[ Aleksandar Ružičić @ 26.06.2008. 20:26 ] @

nema na cemu, drago mi je da vam koristi :)