bara de defilare

Un capitol scurt și foarte simplu pe culoarea barei de defilare.

Pentru a modifica designul barei de defilare să-l picteze în felul său, este necesar să se utilizeze proprietățile familiei scrollbar. le atribuie un element dorit.

Ca elemente pot acționa în orice blocuri care ar putea să apară în mod ipotetic scrollbar

, <iframe> etc. inclusiv pagina în sine - tag-ul <body> .
Tabelul de mai jos prezintă proprietățile familiei CSS scrollbar. și arată, de asemenea, rezultatul acestor proprietăți.
Proprietatea a barei de defilare:
scrollbar-3dlight-color: # FF0000; - Culoarea din stânga sus și cursorul umbra și butoanele.
scrollbar-săgeată-color: # FF0000; - Culoarea săgețile de pe butoanele scrollbar.
# ff0000;: scrollbar-base-color - Culoarea de bază a barei de defilare.
scrollbar-DarkShadow-color: # FF0000; - Culoarea de jos și umbra dreapta (umbră întunecată - o umbră întunecată).
scrollbar-fata-color: # FF0000; - Culoarea din față a barei de defilare.
scrollbar-evidenția-color: # FF0000; - scrollbar Culoare iluminare din spate.
scrollbar-shadow-color: # FF0000; - Culoarea umbra a barei de defilare (umbra-umbra).
scrollbar-track-color: # FF0000; - Culoarea pistei pentru o bară de defilare.
Ei bine, aici, de asemenea, un desen pentru claritate:
Valorile posibile pentru proprietățile familiilor scrollbar:
<ul>
<li># FF0000 - RGB valori de culoare hexazecimal.</li>
<li>roșu - Valoarea nominală a culorii.</li>
<li>RGB (255, 0, 0) - O valoare de culori RGB.</li>
<li>moștenesc - a folosit valoarea elementului mamă (implicit).</li>
</ul>
fișier primer3.css corp< background-color: # fff8dc; scrollbar-3dlight-culoare: #ffebcd; scrollbar-săgeată-culoare: #FFFFFF; scrollbar-base-culoare: #ffebcd; scrollbar-DarkShadow-color: # f5f5dc; scrollbar-fata-culoare: # b8860b; scrollbar-evidenția-color: # f5f5dc; scrollbar-shadow-color: # f5f5dc; scrollbar-track-color: # f5f5dc; > div< padding: 20px; overflow: auto; lățime: 200px; height: 100px; frontieră: solide 2PX # deb887; culoare de fundal: #FFFFFF; > Fișierul index.html <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>bara de defilare</title> <link rel="stylesheet" href="primer3.css" type="text/css"> </head> <body> <div> <h3 align="center">dictare</h3> Pe terasă, în apropierea Konoplyanik notoriu văduvă Agripina Savvichna, el regaled, retras evaluator colegial Apollo Karpovich, scoici, la acompaniament violoncelului. </div> </body> </html>
Vreau să rețineți că proprietățile CSS scrollbar de familie este o extensie a caietului de sarcini CSS2, introdus de Microsoft, și implementat în Internet Explorer începând cu versiunea IE 5.5, respectiv, alte browsere, la acel moment, ignorat complet această proprietate. Dar pe măsură ce timpul a trecut și multe browsere au început să se adapteze la acest add-on la specificațiile Microsoft.
Cu toate acestea, până în prezent, nu este atat de buna! Așa că stilul de bare de defilare sau ignorate în mai multe browsere sau rularea nu este în întregime corectă. de exemplu, multe ignora această proprietate pentru o etichetă <body> sau nu înțeleg unele dintre proprietățile individuale ale bara de derulare.
Mai jos sunt câteva sfaturi pentru a vă ajuta să puteți rezolva această problemă în diferite browsere. Folosește cuvântul „probabil“, deoarece este foarte dificil de a urmări dinamica a tuturor modificărilor de browsere diferite. Lumea merge mai departe în fiecare zi, aici sau acolo, ceva se schimbă! Este păcat că compatibilitatea cross-browser-ul este întotdeauna dureri de cap!
Dar ce am vorbit. Astfel, numărul de „pastile“:
1. Dacă este posibil, utilizați un titlu aici <!DOCTYPE> :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
2. Precizați proprietățile, nu numai că bara de defilare pentru tag-ul <body> dar, de asemenea, pentru a eticheta <html>
html, corpul< scrollbar-3dlight-culoare: #ffebcd; scrollbar-săgeată-culoare: #FFFFFF; >
3. Încercați-l, dacă este mai puțin eficientă pentru site-ul dvs., să pună în aplicare stilurile scrollbar folosind atributul style. în loc de aceeași etichetă de nume în „cap“ al documentului sau fișierul css extern
<div style=" scrollbar-3dlight-color: #ffebcd; scrollbar-arrow-color: #ffffff;">bloc</div>
Poate că aceste recomandări vor lucra în unele browsere, în orice caz, IE (incepand cu versiunea 5.5), totul va funcționa corect, și dacă cel puțin undeva la locul de muncă este deja bine!
Având în vedere că este una dintre derulare importante elemente ale interfeței, încercați să nu pentru a ghida utilizatorul în eroare, folosind un design absolut non-standard a barei de defilare.
Dacă ai făcut doar absolut necesar scrollbar personalizate, nu numai o culoare personalizată, și este forma non-standard, și de asemenea, să lucreze în toate browserele folosind script-uri, dar nu uita despre primul sfat !!
În browser-ul dvs., aspectul barei de defilare este desenată din setările Windows și astfel pentru mine, ea are un aspect de genul:
Dar, de îndată ce aplicați o bară de derulare scrollbar orice proprietate a familiei. conectarea la setările Windows vor fi pierdute, sau mai degrabă va fi „implicit“, iar aspectul banda dobândi astfel:
<h4>articole similare</h4>
<ul>
<li>
<a href="/revista-55/modificarea-aspectului-barei-de-defilare-in.html">Modificarea aspectului barei de defilare în browser</a>
</li>
<li>
<a href="/revista-55/pedeapsa-prevazuta-pentru-deplasarea-pe-o-banda-de.html">Pedeapsa prevăzută pentru deplasarea pe o bandă de autobuz pe vehicul</a>
</li>
<li>
<a href="/revista-55/vesta-fur-cu-dunga-blana-de-vulpe-benzi.html">vestă Fur cu dungă blana de vulpe (benzi)</a>
</li>
</ul>
<div class="vnizine"><a href="/revista-55/iniţiativa-de.html">Pagina anterioară</a><a href="/revista-55/miros-neplacut-l.html">Pagina următoare</a>
</div>
</article>
</div>
 </div>
 </div>
 </div><footer class="akatita-footer clearfix">
<div class="akatita-content-layout layout-item-0">
 <div class="akatita-content-layout-row">
 <div class="akatita-layout-cell layout-item-1" style="width: 20%">
 Articole aleatoare
 
 <ul>
<li><a href="/utilizator-198/cum-de-a-face-un-dinozaur-din-hartie-de-mana-ls.html">Cum de a face un dinozaur din hârtie de mână, ls</a></li>
<li><a href="/utilizator-132/iarba-pentru-boala-oculara.html">Iarbă pentru boala oculară</a></li>
<li><a href="/utilizator-160/pisica-salbatica-ussuriysk.html">Pisica sălbatică Ussuriysk</a></li>
<li><a href="/utilizator-166/perii-pensule.html">Perii, pensule</a></li>
<li><a href="/utilizator-209/cum-se-termina-basmele-in-realitate.html">Cum se termină basmele în realitate</a></li>
 </ul>
 </div><div class="akatita-layout-cell layout-item-1" style="width: 20%">
 locație
 
 <ul>
			<li><a href="/locul-pe-harta.html">Suntem pe hartă</a></li>
			<li><a href="/adresa.html">Adresa</a></li>
 </ul>
		<ol>
<li><a href="/sitemap/sitemap137.html">sitemap</a></li>
<li><a href="/sitemap/sitemap173.html">sitemap</a></li>
<li><a href="/sitemap/sitemap245.html">sitemap</a></li>
<li><a href="/sitemap/sitemap480.html">sitemap</a></li>
<li><a href="/sitemap/sitemap1031.html">sitemap</a></li>
 </ol>
 </div><div class="akatita-layout-cell layout-item-1" style="width: 20%">
 Mai multe despre noi
 
 <ul>
	<li><a href="/contactati-ne.html">Contactați-ne</a></li>
	<li><a href="/despre-site.html">Despre site</a></li></ul>
 </ul>
 </div><div class="akatita-layout-cell layout-item-1" style="width: 40%">
	
	<a href="#"></a>Drepturi de autor © 2025. Toate drepturile rezervate. 
 
<script>
new Image().src = "https://counter.yadro.ru/hit;adolfru?r"+
escape(document.referrer)+((typeof(screen)=="undefined")?"":
";s"+screen.width+"*"+screen.height+"*"+(screen.colorDepth?
screen.colorDepth:screen.pixelDepth))+";u"+escape(document.URL)+
";h"+escape(document.title.substring(0,150))+
";"+Math.random();</script>
		
 </div>
 </div>
</div>
</footer>

</div>
</div></body>
</html>