30-50% off hundreds of digital assets! WordPress themes, video, music and more 30-50% Off Go to Sale
Advertisement
  1. Web Design
  2. CSS
Webdesign

Mabilisang Paalala: Pag-Istilo ng Scrollbar upang Tumugma sa Disenyo ng iyong UI

by
Length:LongLanguages:

Tagalog (Wikang Tagalog) translation by Robert Alexander (you can also view the original English article)

Ito ay gagabay sa iyo sa pagpapabuti ng hitsura at pakiramdam ng mga scrollbar upang tumugma sa disenyo ng iyong UI. Ating titignan kung ano ang maibibigay ng WebKit browser sa mga tuntunin ng CSS, at gagamitin natin ang isang jQuery na magsisilbing reserba para sa iba pang mga browser.

Naghahanap ng mabilis na paraan?

Kung kailangan mo ng tulong para sa disenyo ng isang partikular na bahagi sa iyong website, mas mabilis makahanap ng tulong sa isang propesyonal. Ang Envato ay may mga eksperto na handing tumulong sa pagbago ng disenyo at pagaangkop para sa arili ng lahat ng uri ng mga bahagi ng web.

Web component services on Envato Studio

Munting Paalala Tungkol sa Mga Browser

Kapag sinabi nating Webkit-based na mga browser kalimitan ito ay tungkol sa Apple Safari at Google Chrome. Sila ang bumubuo ng mahigit 40% ng pangkalahatang merkado ng desktop browser. Para sa mga tablet, Ang Apple iPad ay palaging gumamit ng Webkit kahit anong browser ang piliin gamitin. Idinagdag din ng Google ang Chrome sa kanyang Android OS at ang Chromebook na naka batay sa Google Chrome.

Ayon sa mga datos ang kinabukasan para sa pagdisendyo ng scrollbar ay maliwanag na maganda!


Hakbang 1: Isang Simpleng Pahinang may Scrollbars

Bago tayo magsimula sa pagtalakay tungkol sa pagdisenyo ng scrollbar gamit ang CSS, kailangan natin ng isang gumaganang halimbawa, isang pahinang may mga scrollbar. Ang mga scrollbar ay may maaring makita kung:

  • Ang nilalaman ay mas malaki kaysa sa nakikitang window area (isang scrollbar ay lalabas sa kanan).
  • A textarea ay may bilang na letrang kailangan para mapalabas ang scrollbar.
  • Ang isang iframe ay ginagamit upang ipakita ang isang pang pahina
  • Ang div o anumang iba pang elementong panghadlang ay may overflow grupo ng uri.

Para sa kapakanan ng demo na ito ang pipiliin natin ay ang panghuling nabanggit. Narito ang aking panimulang marka:

Ito ay div na puno ngunit hindi totoo ang laman. At ito ang panimulang CSS, na nagtatakda ng ilang mga nakapirming mga sukat at nagsisimula para sa parehong pahalang at patayong mga scrollba:

Dapat ang makikita mo ay may halintulad ditto:


Hakbang 2: Pagsimula gamit ang mga Webkit Browser

Dati (mga ilang taon na nakaraan) CSS Pseudo Elements ay ipinakilala sa Webkit browser upang ma-target ang mga scrollbars, na nagbibigay ng pagkakataon para mabagoang istilo ng iyong pahina ayon sa iyong tema

Baguhin natin ang disenyo ng isang scrollbar gamit ang -webkit- prefix at ang katangian ng pangsariling istilo ng webkit scrollbar. Tandaan na ako ay sumunod sa pangunahing katangian ng CSS para madali maintindihan, kasama ang paliwanag sa mga komento.

Kapag meron pseudo element, papatayin ng WebKit  ang kasamang scrollbar na ngsasalin at gagamitin lamang ang ibinigay na impormasyon na ibinigay sa CSS. - Surfin 'Safari

At ngayon para sa iba pang mga pseudo-elements:

Pagkatapos maidagdag ang CSS maari mon a makita ang mga sumusunod na epekto.(ulit,ang mga Webkit Browsers lamang).

Alam mo ba? Ang Internet Explorer ay may sariling pagistilo ng scrollbar!

Tama iyon - sa katunayan IE ay ang unang browser na sumuporta sa pagistilo ng scrollbar gamit ang CSS. Dati pa nuong panahon ng IE5.5, pero ang kulay lang ang maari palitan.

Ang mga katangiang iyon ay maari pa gamitin ngayon; tignan mo itong isang katangian ditto sa IE 9 na para lamang halimbawa:

Tignan ang magiging itsura:


Hakbang 3: Pangsalo para sa mga Hindi-Webkit na Browser

Tama na muna sa WebKit. Ang Firefox, IE at Opera ay maaari ring sumali sa masaya. Para sa kanila mayroon tayong isang napaka gandang pangsalo ang dating sa anyo ng jScrollPane. Itong jQuery plugin ay binuo ni Kelvin Luck at ito ang magliligtas sa ating araw.

Ang website ni Kelvin website ay maraming mga mahusay na mga halimbawa, ngunit para sa pangunahing paggamit kailangan lang mgdownload ng jQuery at ang mga talaksan ng jScrollPane at ipatupad gaya ng mga sumusunod na paraan:

Para bumagay sa ating thema, buksan natin ang jquery.jscrollpane.css at i-edit ang mga sumusunod na mga linya  gamit ang mga halaga ng kulay (para gumana ng maayos ilagay ang mga istilo sa iyong mga talaksan)

Ito ang kuha ng panabing na makikita gamit ang Firefox:


Konklusyon

Ang mga Web Apps tulad ng Gmail at Google+ (kasama ang maraming pang iba) ay nagsimula ng tanggapin ang ideya at kung ito ay mgtuloy tuloy, marahil ang Firefox at IE ay magbibigay rin ng kanilang mga solusyon.

Sana ay natuwa ka sa mabilisang paalala at umaasa ako makikita ang mga ginawa ninyong disenyo sa mga tinatrabahong scrollbars!


Iba pang pagkukuhaan ng impormasyon

Mga Scrollbar na maari baguhin sa Envato Market

Kung naghahanap ka ng nakahanda ng solusyon, ngaalok ang Envato Market ng seleksyon ng mga scrollbars na maaari mong ipasok sa iyong website upang makamit ang isang magandang klase ng epekto. Narito ang halimbawa sa kanila:

1. Lazybars - Themeable responsive scrollbar jQuery plugin

Lazybars ay isang madaling gamitin, nababago ang thema na scrollbar jQuery plugin. Maaari mong ipatupad ang mga scrollbars sa pamamagitan lamang ng pagdaragdag ng isang pangalan ng klase na sa anumang mang elemento sa iyong website na maaring i-skrol.

Gamitin ang mga thema na kasama ng Lazybars o lumikha ng sarili mong simpleng CSS.

Lazybars - Themeable responsive scrollbar jQuery plugin
Lazybars - Themeable responsive scrollbar jQuery plugin

2. Fancy Scrollbar – WordPress

"Fancy Scrollbar – WordPress" ay isang plugin na maaaring lumikha ng isang pasadyang scrollbar sa WordPress site. Ito ay may napakaraming mga pagpipilian sa pag-customize. Maaari mong i-customize ang kulay, epekto, mag-scroll pagkaantala, rail strip, at marami pang mga parameter.

Fancy Scrollbar - WordPress
Fancy Scrollbar - WordPress

3. Awesome Custom Scrollbar

Awesome Custom Scrollbar ay isang mataas na napapasadyang custom scrollbar jQuery plugin para sa iyong WordPress website. Gamit ang plugin maaari mong i-customize ang iyong webpage scrollbar, at maaari mong i-embed ng Custom Scrollbar sa pamamagitan ng shortcode kahit saan gusto mo, kahit na sa mga talaksan na tema.

Awesome Custom Scrollbar
Awesome Custom Scrollbar

4. DZS Scroller

DZS Scroller ay nagbibigay ng isang scrollbar para sa iyong site na kung saan madali mong maiangkop sa sariling pangangailangan gamit ang CSS kung ang tatlong pabalat na kasama ay hindi sapat. May kasama din itong pinahusay na kabisa tulad ng mag-iskroll sa pamamagitan ng pag-hover o kumupas sa mouse leave. At ito ay gumagana sa iPhone/iPad.

DZS Scroller
DZS Scroller

5. CSS3 Scrollbar Styles

Ang maganda at makulay na CSS3 Scrollbar ay madaling gamitin para sa iyong website.Ito ay madali upang gamitin ang maganda at makulay CSS3 Scrollbar para sa iyong website. Kailangan lang ipasok sa mga kasalukuyang talaksan ng CSS at tamasahin ang mga bagong CSS3 Scrollbar.

CSS3 Scrollbar Styles
CSS3 Scrollbar Styles
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.