Share
Acest sfat vă va ghida în îmbunătățirea aspectului și simțului barelor de derulare pentru a se potrivi cu designul dvs. de interfață. Vom analiza ce browsere WebKit ne oferă în termeni de CSS, plus vom folosi o jQuery backback pentru a satisface și alte browsere.
Dacă aveți nevoie de ajutor pentru a modela o anumită componentă a site-ului dvs., poate fi mai rapid să obțineți ajutor de la un profesionist. Envato are experți gata să ajute la re-styling sau personalizarea tuturor tipurilor de componente web.
Când ne referim la browserele bazate pe Webkit, discutăm despre Apple Safari și Google Chrome. Împreună, acestea dețin în prezent mai mult de 40% din piața globală a browserului desktop. Pentru tablete, iPad-ul Apple va folosi întotdeauna Webkit indiferent de browser-ul companiei pe care îl folosiți. Google a adăugat, de asemenea, Chrome pe sistemul său de operare Android, iar Chromebookurile se bazează bineînțeles pe Google Chrome.
Privind aceste cifre, ar trebui să existe un viitor foarte luminos pentru stilul de scroll bar!
Înainte de a putea începe cu tema actuală a barelor de derulare cu CSS, avem nevoie de o demonstrație funcțională; o pagină cu bare de derulare. Barele de derulare pot fi văzute dacă:
Accentsconagua
textarea conține un text suficient, astfel încât să apară barele de derulare.iframe este utilizat pentru a afișa o altă pagină.div sau orice alt element de bloc are revărsare set de proprietate.De dragul acestui demo vom merge cu ultima opțiune. Aici este marca mea inițială:
Lorem ipsum dolor stați amet, consectetur adipiscing elit. Curabitur rhoncus tortor eget orci fringilla non semper magna aliquet. Aliquam convallis elit sem. Proin fringilla fermentum pretium. Fasellus id nisl u eros convallis eleifend. În hac habitasse platea dictumst. În felis massa. Maecenas vitae quam non elit porta pellentesque ac in erat. Nullam ante felis, ullamcorper suscipit felis. Maecenas sit amet nisl mattis ipsum ullamcorper aliquam vitae sed sapien. Clasa de aptitudini sociale taciti socio-t litora torquent per conubia nostra, per inceptos himenaeos.
Sed sed sayus dolor, non lobortis felis. Clasa aptitudini taciti sociosqu ad tortor per conubia nostra, per inceptos himenaeos. În eget nisl viverra risus feugia vulputate tempus et leo. Nam metus nibh, tristic non sodales non, interdum et neque. Lorem ipsum dolor stați amet, consectetur adipiscing elit. Sedum imperdiet aliquet vestibulum. Curabitur viverra tortor augue, un alichet Tellus. Vivamus eu felis mare lorem tincidunt imperdiet. Fusce iaculis luctus convallis. Proin adipiscing malesuada enim și feugiat tortor sagittis eu. Cras convallis felis eu leo tempus și fermentum urna cumsan. În quis metus la metus ultricies fringilla. Maecenas sed lacus aliquam nibh semper dignissim și quis est.
Sosile sosite, sapien sit amet congue egestas, sem ligula ornare massa, vitae suscipit felis ligula quis velit. Phasellus lectus massa, sucuri ac vulute ac, pharetra quis lacus. Morbi tempus pretium nisi sed pretium. Pellentesque dicta volutpat vulputate. Fusce dapibus sagittis felis, în consecință, nu se aplică. Cras elite orci, vehicule în sagittis a, faucibus vitae dui. Nunc non lorem în metus adipiscing adipiscing non a sapien. Sed dictum ultrices nibh în tristique. Nulla dapibus laoreet tincidunt. Sedsan erat quis mi luctus porta.
Soldați puțin, doar căutați. Fusce vehicula viverra magna și fringilla lectus porta quis. Donec eu fermentum mi. Donec sustin pellentesque iaculis. Phasellus est leo, cursus eget consectetur în, tristique sit amet tortor. Cras elefend felis stai amet eros vehicula aliquet. Pellentesque fringilla metus în libero luctus eu condimentum nulla pretium. Lorem ipsum dolor stați amet, consectetur adipiscing elit. Cu toate acestea, s-ar putea să se înțeleagă, de exemplu, dignissim turpis pharetra et. Nullam commodo hendrerit elementum. Donec porta faucibus ligula non blandit. În ultrices vehicula pretium.
Sed ac sagittis sapien. Curațitorul varius pellentesque nunc eget molestie. Vivamus în massa arcu, ut auctor tellus. Aliquam convallis lobortis magna, ut posuere odio euismod ac. Vestibulum în enim vitae metus vulputate interdum. Mauris un risus auctor nunc fermentum dapibus. Proin iaculis, nunc ut viverra varius, august aug porta libero, id viverra nisl elit in mauris. Aenean quis risus ante. Donec bibendum erați un vestibulum eu aliquet lectus tincidunt. Vivamus imperdiet conga leo, nu ultricii urna sodales sed. Pellentesque habitat morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla vitae rhoncus dui. Nunc în nisi în ante imperdiet tincidunt sagittis eu ipsum. Aenean orci justo, faucibus placerat tincidunt vitae, vehicula la libero.
E doar un lucru div cu o mulțime de conținut fals. Și aici este CSS inițial, care stabilește unele dimensiuni fixe și declanșează atât barele de derulare orizontale și verticale:
.container lățime: 400px; înălțime: 300px; fundal-culoare: #DCDCDC; overflow: parcurgere; / * afișarea barelor de derulare * /
Ar trebui să puteți vedea ceva similar cu acesta:
Câțiva ani în urmă, CSS Pseudo Elements au fost introduse în browserele Webkit pentru a viza barele de derulare, prezentând posibilitatea de a modela pagina în funcție de tema dvs..
Să stil ceva, folosind -WebKit- prefix și proprietățile personalizate ale barei de derulare webkit. Rețineți că mă ocup doar de proprietățile CSS de bază pentru a fi ușor de înțeles, cu explicații în comentarii.
:: - webkit-scrollbar lățime: 15px; / * aceasta vizează bara de derulare implicită (obligatorie) * /
Când acest element pseudo este prezent, WebKit va dezactiva randarea barei de derulare încorporate și va folosi informațiile furnizate în CSS. - Surfin 'Safari
Și acum pentru unele dintre celelalte pseudo-elemente:
:: - webkit-scrollbar-track fundal-culoare: # b46868; / * noua bară de derulare va avea un aspect plat cu culoarea de fundal stabilită * / :: - webkit-scrollbar-thumb fundal-color: rgba (0, 0, 0, 0,2); / * acesta va schimba degetul mare, ignorând pista * / :: - webkit-scrollbar-button background-color: # 7c2929; / * opțional, puteți modela butoanele de sus și de jos (stânga și dreapta pentru barele orizontale) * / :: - webkit-scrollbar-corner background-color: black; / * dacă apar atât barele verticale, cât și cele orizontale, atunci este posibil ca și colțul inferior din dreapta să aibă și stilul * /
După adăugarea acestui CSS ar trebui să puteți vedea următorul efect (din nou, doar browserele Webkit).
Așa-i, de fapt, IE a fost primul browser care a sprijinit vreodată stilul de bare de derulare prin CSS. Acest lucru a fost din nou în zilele de IE 5.5, dar numai culoarea poate fi schimbat.
Aceste proprietăți pot fi folosite astăzi; aruncați o privire asupra acestei proprietăți unice pe IE 9 în scopuri demonstrative:
corp scrollbar-face-color: # b46868;
Vedeți cum ar arăta:
Destul despre WebKit. Firefox, IE și Opera se pot alătura, de asemenea, distracției. Pentru ei avem o abordare de rezervă foarte frumoasă sub forma jScrollPane. Acest plugin jQuery este dezvoltat de Kelvin Luck și va fi salvatorul nostru pentru această zi.
Site-ul Kelvin are o mulțime de exemple bune, dar pentru utilizarea de bază tot ce trebuie să faceți este să descărcați fișierele jQuery și jScrollPane și să le implementați în felul următor:
Doar pentru a ne potrivi temei, să deschidem jquery.jscrollpane.css și editați următoarele linii cu valorile culorilor (pentru îmbunătățiri de performanță, puteți dori să plasați toate stilurile în propriile fișiere):
.jspTrack background: # b46868; / * schimbat de la #dde * / position: relative; .jspDrag fundal: rgba (0,0,0,0,2); / * schimbat de la #bbd * / position: relative; top: 0; stânga: 0; cursor: pointer;
Iată o captură de ecran a ceea ce veți vedea în Firefox:
Aplicațiile Web precum Gmail și Google+ (împreună cu multe alte exemple) au îmbrățișat deja ideea și, dacă acest impuls continuă, Firefox și IE vor oferi, de asemenea, soluții proprii.
Sper că v-ați bucurat de acest sfat rapid și aștept cu nerăbdare să văd ce faceți cu barele de derulare în lucrarea de proiectare!
Dacă sunteți în căutarea unei soluții gata, Envato Market oferă o selecție de bare de derulare pe care le puteți conecta la site-ul dvs. pentru a obține o serie de efecte. Iată câteva dintre ele:
Lazybars este un plugin jQuery de scrollbar ușor de utilizat. Puteți pune în aplicare aceste bare de derulare doar prin adăugarea unui nume de clasă la orice element scrollabil de pe site-ul dvs. Web.
Folosiți temele care sunt asociate cu Lazybars sau creați-vă propriile cu unele CSS simple.
Lazybars - Plugin jQuery cu funcție de derulare cu răspuns sensibil"Fancy Scrollbar - WordPress" este un plugin care poate crea o bară de scroll personalizată pe site-urile WordPress. Are multe opțiuni de personalizare. Puteți personaliza culoarea, efectele, întârzierea derulării, bara de șine și mulți alți parametri.
Fancy Scrollbar - WordPressAwesome Custom Scrollbar este un plugin customizabil jQuery personalizat pentru scrollbar personalizat pentru site-ul dvs. WordPress. Cu acest plugin puteți personaliza bara de derulare a paginii dvs. web și puteți integra Bara de scroll personalizată prin shortcode oriunde doriți, chiar și în fișiere tematice.
Bara de derulare particularizată extraordinarăDZS Scroller oferă o bară de navigare pentru site-ul dvs. pe care o puteți personaliza foarte ușor prin intermediul CSS dacă cele trei piei incluse nu sunt suficiente. De asemenea, vine cu funcționalități îmbunătățite, cum ar fi derulați cu mouse-ul sau decolorați mouse-ul pe concediu. Și funcționează pe iPhone / iPad.
DZS ScrollerEste ușor să utilizați bara de derulare CSS3 frumoasă și colorată pentru site-ul dvs. Web. Pur și simplu inserați în fișierul CSS existent și bucurați-vă de noua linie de derulare CSS3.
Șabloane de bare de derulare CSS3
