[es] - scroll wihout scrollbar

markalauskas
Manga Hostel
Beograd

Član broj: 83048
Poruke: 267
*.adsl-a-1.sezampro.yu.

Sajt: www.mangahostel.com

Profil

scroll wihout scrollbar

^{12.06.2008. u 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.

www.mangahostel.com

^{12.06.2008. u 15:53}

Aleksandar Ružičić
Senior Developer, Haragei d.o.o
Beograd - Čačak

Moderator
Član broj: 26939
Poruke: 2041
*.dynamic.adsl.itsisp.net.

Jabber: krcko@haragei.com
Sajt: krcko.haragei.org

Profil

Re: scroll wihout scrollbar

^{12.06.2008. u 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)

jQuery addict!

Prikačeni fajlovi

scroll demo.zip - 19.46k

scrollarea.min.js - 0.93k

^{12.06.2008. u 20:20}

markalauskas
Manga Hostel
Beograd

Član broj: 83048
Poruke: 267
*.adsl-1.sezampro.yu.

Sajt: www.mangahostel.com

Profil

Re: scroll wihout scrollbar

^{13.06.2008. u 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.

www.mangahostel.com

^{13.06.2008. u 13:51}

Re: scroll wihout scrollbar

^{13.06.2008. u 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)

jQuery addict!

^{13.06.2008. u 13:53}

Re: scroll wihout scrollbar

^{13.06.2008. u 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...

jQuery addict!

^{13.06.2008. u 14:47}