Scroll bar színezése minden böngészőben...

**Sanyi49** · 2012-05-23, 23:24

Ha megosztanád itt a szkriptet, lehet ki tudnánk bogarászni a nem működő dolgokat.

**flaszlo** · 2012-05-23, 23:38

Hát szerintem lehet válogatni a lehetőségekből, rengeteg megoldás van...Jquery+scrollbar keresés.

**Lia** · 2012-05-24, 10:01

LEHET színezni a görgető sávokat (scroll) minden böngészőben!
Nem rég készítettem az alábbi megoldást. Egy kis CSS trükkel megoldható a probléma. Töltsd le a FlexCroll scriptet innen fleXcroll: Cross Browser Custom ScrollBar script by Hesido , majd a HTML-ben módosítsd a paramétereket. Állítsd be a site-ot így:

* { margin: 0;padding: 0;} html,body {height:100%; width:100%;} html,body{overflow:auto;} * html{height:100%; width:100%;}

A fleXcroll script készítője azt mondja, csak fix méretekkel jeleníthető meg a dobozka tartalma. Ez igaz is, de most a képernyő scrollozását szabályozzuk, tehát a méretek itt is 100%-osak.

<div class="flexcroll" style="overflow:auto; float:left; margin-right:-999em; height:100%;width:100%; ">
Ahol is a jobb szélét eltoljuk a képernyőnek.
A scroll konfigurálása (képek vagy színezés) már sima CSS.

A </head> elé ne felejtsd el beírni az utalást:
<script type="text/javascript" src="flexcroll/flexcroll.js"></script>
<link href="flexcroll/flexcrollstyles.css" rel="stylesheet" type="text/css">
A flexCroll div bezárása előtt illessz be egy div elemet olyan szélességűre, mint a lap belső tartalma, pozicionálása a tartalom elhelyezkedésétől függő, hogy a kis monitorokon is megjelenjen az alsó scroll. Valahogy így:
<div align="center" style="width:1000px; padding: 0.1%em; margin-top:-0.3em; margin: 0 auto;" ></div>

Ezzel meg is vagyunk.
Demo itt látható: Színes görgetősáv minden böngészőben

Próbáld minden böngészőben....működik.

Jó szórakozást!

**LadyJ** · 2012-05-24, 12:40

Lia ez fantasztikus. Kerestem és találtam is megoldásokat IE re, Google Chrome, Safari böngészőkre amik mentek szépen, de Firefox ban nem tudtam megoldani, csak diven belüli színezést. Köszönöm a munkád és az ötleted, gratulálok. Vettem a fáradságot ha nem haragszol és kinyomoztam a neved és beírom ide Czernák Ottilia találta meg a megoldást. Nem reklámnak szántam csak elismerésnek.

**Emphus** · 2012-05-24, 13:38

Lia eredeti hozzászólása

akkor miért nem csinálta már meg? A világon mindenhol ezt keresik, vagy ő ezt nem tudja?
Amúgy a W3C szabvány azon részéről írtam, miszerint a Firefox szemlélete szerint a scroll bar nem része a lapnak, ezért annak módosítása nem is lehetséges. Ezen szemléletén pedig nem is akar változtatni.

Hát, én nem nagyon láttam, hogy bárhol a világon is agyonkeresnék a megoldást. Még Facebookon is fent van, pl. oldalt a chatnél. Az is ugyan ez.
Itt lényegében nem is a scrollbart színezed, hanem a scrollbar ott sincs, és scriptből szimulálsz egy scrollbarnak kinéző görgethető dolgot.

És azért nem csináltam még meg, mert nem kellett sose, és már 23434546 ember megcsinálta.

(Pl. van rá jQuery plug-in, ahogy flaszlo is írta.)

flaszlo eredeti hozzászólása

Szerintem javascript is kell hozzá, pl. jquery-hez is van plug-in (ha jól emlékszem jscrollpane), de Lia is azt mondta, hogy kell hozzá egy kis script.

Ahogy én is írtam, hogy js-el simán megoldható.

Amúgy IE-ben tisztán CSS-ből is, bár az tényleg csak színezés, nem saját scrollbar.

**LadyJ** · 2012-05-24, 18:03

[QUOTE=Emphus;272563]Hát, én nem nagyon láttam, hogy bárhol a világon is agyonkeresnék a megoldást. Még Facebookon is fent van, pl. oldalt a chatnél. Az is ugyan ez.

Szerintem meg egyáltalán nem így van. A Facebookon a chatnél lévő "színes" scroll is divben van és azt eddig sem volt gond megoldani. Amire egyáltalán nem találtam megoldást és még a flexcroll.js irója sem, hogy a oldal külső görgetője színes legyen firefox alatt. Ie vel lehetett, Chrome ban, safariban is ::-webkit megoldással, de Firében nem. Az meg h a téma érdektelen lenne ellentmond hogy csak a firefox színes scroll kérdésre is majd 2 milló találat volt.

**flaszlo** · 2012-05-24, 18:14

Kedves LadyJ, a már emlegetett jQuery-jscrollpane plug-in működik FF alatt is, külső scrollbar-ra is (css-ben lehet testreszabni).

**LadyJ** · 2012-05-24, 18:35

Meglesem mindjárt, kíváncsi vagyok

**Emphus** · 2012-05-24, 18:41

LadyJ eredeti hozzászólása

Szerintem meg egyáltalán nem így van. A Facebookon a chatnél lévő "színes" scroll is divben van és azt eddig sem volt gond megoldani. Amire egyáltalán nem találtam megoldást és még a flexcroll.js irója sem, hogy a oldal külső görgetője színes legyen firefox alatt. Ie vel lehetett, Chrome ban, safariban is ::-webkit megoldással, de Firében nem. Az meg h a téma érdektelen lenne ellentmond hogy csak a firefox színes scroll kérdésre is majd 2 milló találat volt.

Látom, a hozzászólásom többi részét már nem sikerült értően elolvasni:

Emphus eredeti hozzászólása

Itt lényegében nem is a scrollbart színezed, hanem a scrollbar ott sincs, és scriptből szimulálsz egy scrollbarnak kinéző görgethető dolgot.

A Facebook chatnél lévő scrollbar az NEM scrollbar. Ahogy fentebb is írtam, az, amit ez a script kínál az NEM scrollbar. Annyit csinálsz, hogy eltünteted a scrollbart (overflow:hidden), majd generálsz oda egy elemet, ami OLYAN, MINTHA scrollbar lenne, úgy funkcionál, de NEM az.
Ez teljes body-ra is meg lehet csinálni. Az, hogy Neked nem sikerült az egy dolog, ettől még lehet úgy valami. Pláne, hogy ha nem is lehetne body-ra, akkor is beraksz egy 100% széles és magas divet, és voilá. Nem nagy kaland.

A 2 millió találatos érvelés meg ezen a fórumon egy vicc.

Tekintsünk el attól, hogy nem is annyi találat van. A lényeg, hogy Google itt minden találatot kidob, aminek köze van a Firefox, a színes vagy a scroll szavakhoz. De itt is csak az írásom felére sikerült reagálnod, arra nem, hogy már 345546343 ember megcsinálta előttem. Pl. ott a jQuery plug-in, de már volt a kezem között több kész megoldás js-ben, keretrendszer nélkül, sőt, flashből is meg lehet oldani, olyan oldalt is láttam már tucatszámra, és a lehetőségek tárháza közel sem ért még véget.

**Lia** · 2012-05-24, 23:16

Látom jó kis társalgás jött össze az oldalon, az általam feltett megoldáshoz. Nem értem Emphus okfejtését, mivel rengeteg ember keresi a scroll színezhetőségét. IE-ről már ne beszéljünk, hiszen az már lerágott csont, mindenki ismeri. Legfőképp a FF volt a kérdés.
Az, hogy ...<"Itt lényegében nem is a scrollbart színezed, hanem a scrollbar ott sincs, és scriptből szimulálsz egy scrollbarnak kinéző görgethető dolgot.">...
csak szimulálom a scrollt, a kutyát nem érdekli, a lényeg, hogy amit szeretne látni és láttatni az megvalósul.

Nem kívánok vitát nyitni a dologról. Egy megoldással több van, mindenki válogasson kedvére....
Azért a dologban nem utolsó szempont, hogy nem kell 5-6 js-t futtani a megoldáshoz.....A jScrollPane jQuery Plugin sem fut megfelelően mindenhol, gondok azzal is vannak és egy laikus nem tud annyi beállítást elvégezni...
Aki pedig ért hozzá, annak ez úgysem volt kérdés. ( Mégsem láttam még olyan weboldalt, ahol a böngésző scrollja színezett vagy képpel helyettesített..?!)

Lady J-nek igaza van abban, hogy több tízezer kérdező részére sem tudtak elfogadható magyarázatot vagy tippet adni az FF görgetősávjának megváltoztatására...(sem itthon, sem külföldön).
Bemutatása pedig végképp nincs! Mindenhol csak lapon belüli scrollozás látható példaként. A böngésző eredeti görgetősávja megmarad a jobb szélen.
Aki tud élő demot mutatni, annak megköszönöm,... de ne most tedd fel!

A lehetőséget köszöntem......