Share
Detta tips hjälper dig att förbättra utseende och känsla av rullningslister för att matcha din UI-design. Vi tar en titt på vad WebKit-webbläsare erbjuder oss när det gäller CSS, plus vi använder en jQuery-återgång för att tillgodose andra webbläsare.
Om du behöver hjälp med att utforma en viss del av din webbplats kan det bli snabbare att få hjälp från en professionell. Envato har experter redo att hjälpa till med omformning eller anpassning av alla typer av webbkomponenter.
När vi hänvisar till webbkitbaserade webbläsare talar vi i huvudsak om Apple Safari och Google Chrome. Tillsammans rymmer de för närvarande mer än 40% av den övergripande stationära webbläsarmarknaden. För tabletter använder Apples iPad alltid Webkit, oavsett vilket företags webbläsare som används. Google har också lagt till Chrome i sitt Android OS och Chromebooks är givetvis baserade på Google Chrome.
Titta på dessa siffror borde det finnas en mycket ljus framtid för rullningslistning!
Innan vi kan börja med det aktuella ämnet stilrullar med CSS behöver vi en funktionell demo; en sida med scrollbars. Scrollbars kan ses om:
Accentsconagua
textarea innehåller tillräckligt med text så att rullningslister visas.iframe används för att visa en annan sida.div eller något annat blockelement har sin svämma över fastighetssättning.För denna demonstras skull går vi med det sista alternativet. Här är min första markering:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur rhoncus tortor eget orci fringilla, inte som helst magna aliquet. Alquam convallis elit sem. Proin fringilla fermentum pretium. Phasellus id nisl eu eros convallis eleifend. I hägerna är det en stor del av döden. In på felis massa. Maecenas vitae quam non elit porta pellentesque ac in erat. Nullam an ante felis, ullamcorper suscipit felis. Maecenas sitter bredvid mattis ipsum, och är heltäckande. Klassificerad taciti sociosqu ad litora torquent per conubia nostra, per incepos himenaeos.
Sed sed tellus dolor, non lobortis felis. Klassificerande taciti sociosqu ad litora torquent per conubia nostra, per incepos himenaeos. På egen hand har Viverra risus feugiat vulputate tempus et leo. Nam metus nibh, tristique non sodales non, interdum et neque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed imperdiet aliquet vestibulum. Curabitur viverra tortor augue, en aliquet tellus. Vivamus eu felis vel lorem tincidunt imperdiet. Fusce iaculis luctus convallis. Proin adipiscing malesuada enim, et feugiat tortor sagittis eu. Det här är ett fel och du får tid och pengar. I quis metus vid metus ultricies fringilla. Maecenas sed lacus aliquam nibh semper dignissim et quis est.
Pröva sodales, sapien sitter på en gång, som en ligula ornare massa, med en mycket stor upplevelse. Phasellus lectus massa, sodales ac vulputate ac, pharetra quis lacus. Morbi tempus pretium nisi sed pretium. Pellentesque dictum volutpat vulputate. Fusce dapibus sagittis felis, ut följt av nisi posuere id. Cras elit orci, vehicula i sagittis a, faucibus vitae dui. Nunc non Lorem i metus adipiscing adipiscing non a sapien. Sed dikterar ultimata nibh i tristique. Nulla dapibus laoreet tincidunt. Förbättra dig själv när du vill.
Säg bara vad du gör, ut pharetra nunc. Fusce vehicula viverra magna, et fringilla lectus porta quis. Donec eu fermentum mi. Donec congue pellentesque iaculis. Phasellus est leo, kursen egen consectetur i, tristique sit amet tortor. Cras eleifend felis sitter amet eros vehicula aliquet. Pellentesque fringilla medus i libero luctus eu condimentum nulla pretium. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Alkaliserad soda lorem, nec dignissim turpis pharetra et. Nullam commodo hendrerit elementum. Donec porta faucibus ligula non blandit. I extremt vehicula pretium.
Sed ac sagittis sapien. Curabitur varius pellentesque nunc eget molestie. Vivamus i massa arcu, ut auktor tellus. Det här alternativet är normalt, men det är inte så bra som möjligt. Fibreringsmetoder i enim med metus vulputate interdum. Mauris en risus auktor nunc fermentum dapibus. Proin iaculis, nunc ut viverra varius, augue augue porta libero, id viverra nisl elit i mauris. Aenean quis risus ante. Donec bibendum är en viktig fråga för alliansen. Vivamus imperdiet congue leo, icke ultraljudsnackaloser sed. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla vitae rhoncus dui. Nunc i nisi i ante imperdiet tincidunt sagittis eu ipsum. Aenean orci justo, faucibus placerat tincidunt vitae, vehicula at libero.
Det är bara en div med mycket dummyinnehåll. Och här är den ursprungliga CSS, som anger vissa fasta dimensioner och utlöser både horisontella och vertikala rullstänger:
.behållare bredd: 400px; höjd: 300px; bakgrundsfärg: #DCDCDC; överflöde: scroll; / * som visar rullstänger * /
Du borde kunna se något liknande det här:
Någon gång tillbaka (flera år) CSS Pseudo Elements introducerades i Webkit-webbläsare för att rikta in rullningslister och presenterade möjligheten att utforma din sida enligt ditt tema.
Låt oss stila något med hjälp av -webkit- prefix och webkit anpassade rullningsegenskaper. Tänk på att jag håller fast vid de grundläggande CSS-egenskaperna för enkel förståelse, med förklaring i kommentarer.
:: - webkit-rullningsfält bredd: 15px; / * Detta riktar sig till standardrullen (obligatorisk) * /
När detta pseudoelement är närvarande, stänger WebKit av den inbyggda rullningsraderingen och använder bara informationen som tillhandahålls i CSS. - Surfin Safari
Och nu för några av de andra pseudo-elementen:
:: - webkit-scrollbar-spår bakgrundsfärg: # b46868; / * Den nya rullningsfältet kommer att ha ett platt utseende med den inställda bakgrundsfärgen * / :: - webkit-rullnings-tummen bakgrundsfärg: rgba (0, 0, 0, 0.2); / * det här stämmer tummen, ignorerar spåret * / :: - webkit-rullningsläge bakgrundsfärg: # 7c2929; / * valfritt, du kan ställa upp de övre och nedre knapparna (vänster och höger för horisontella staplar) * / :: - webkit-rullningshörn bakgrundsfärg: svart; / * om både de vertikala och de horisontella staplarna syns, så kanske det högra nedre hörnet också måste formas * /
Efter att du har lagt till den här CSS bör du kunna se följande effekt (igen, bara Webkit-webbläsare).
Det är rätt - i själva verket var IE den första webbläsaren som någonsin stöttar styling av rullbalkar genom CSS. Detta var tillbaka i dagarna i IE 5.5, men endast färgen kan ändras.
Dessa egenskaper kan fortfarande användas idag; ta en titt på denna enda egendom på IE 9 för demonstrationsändamål:
kropp scrollbar-face-color: # b46868;
Se hur det skulle se ut:
Gott om WebKit. Firefox, IE och Opera kan också gå med i det roliga. För dem har vi ett mycket bra fallback-tillvägagångssätt i form av jScrollPane. Detta jQuery-plugin är utvecklat av Kelvin Luck och det kommer att bli vår frälsare för dagen.
Kelvins hemsida har många bra exempel, men för grundläggande användning behöver vi bara ladda ner jQuery och jScrollPane-filerna och implementera dem på följande sätt:
Bara för att matcha vårt tema, låt oss öppna jquery.jscrollpane.css och redigera följande rader med våra färgvärden (för prestationsförbättringar kanske du vill placera alla stilar i dina egna filer):
.jspTrack bakgrund: # b46868; / * ändrad från #dde * / position: relativ; .jspDrag bakgrund: rgba (0,0,0,0,2); / * ändrad från #bbd * / position: relativ; topp: 0; vänster: 0; markör: pekare;
Här är en skärmdump av vad du kommer att se i Firefox:
Web Apps som Gmail och Google+ (tillsammans med många andra exempel) har redan anammat idén och om denna momentum fortsätter kanske Firefox och IE också ger sina egna lösningar.
Jag hoppas att du haft den här snabba tipsen och jag ser fram emot att se vad du gör med scrollbars i ditt designarbete!
Om du letar efter en färdig lösning erbjuder Envato Market ett urval av rullstänger som du kan ansluta till din webbplats för att uppnå en rad effekter. Här är en titt på några av dem:
Lazybars är ett lättanvänt, tematiskt rullningsbar jQuery-plugin. Du kan implementera dessa rullningsstänger bara genom att lägga till ett klassnamn till ett rullbart element på din webbplats.
Använd de teman som är buntade med Lazybars, eller skapa din egen med några enkla CSS.
Lazybars - Tema för responsiv rullning jQuery plugin"Fancy Scrollbar - WordPress" är ett plugin som kan skapa en anpassad rullningsbar på WordPress-webbplatser. Den har många anpassningsalternativ. Du kan anpassa färg, effekter, rullningsfördröjning, rälsremsa och många fler parametrar.
Fancy Scrollbar - WordPressAwesome Custom Scrollbar är en mycket anpassningsbar anpassad rullbar jQuery-plugin för din WordPress-webbplats. Med detta plugin kan du anpassa din webbsideskrollbana, och du kan bädda in anpassad rullningsbar via kortnummer, var du vill, även i temafiler.
Awesome Custom ScrollbarDZS Scroller ger en rullningsbar för din webbplats som du enkelt kan anpassa via CSS om de tre skinn som ingår inte räcker till. Det kommer också med förbättrad funktionalitet som bläddra genom svävar eller blekna på muslovet. Och det fungerar på iPhone / iPad.
DZS ScrollerDet är lätt att använda den vackra och färgstarka CSS3-rullningsfältet för din webbplats. Lägg bara in i den befintliga CSS-filen och njut av den nya CSS3-rullningsfältet.
CSS3 Scrollbar Styles
