Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. CSS

小技巧:為滾動條添加樣式來匹配你的UI設計

by
Length:LongLanguages:

Chinese (Traditional) (中文(繁體)) translation by Stypstive (you can also view the original English article)

這個小技巧將會引導你來提升滾動條的外觀以達到匹配你UI設計的目的。我們將來看看哪一些WebKit瀏覽器支持這個CSS,另外我們將使用jQuery的fallback來滿足其他瀏覽器的支持。

想要抄個捷徑?

如果正在尋求幫助來為你網站的特定組件添加樣式,那麼你可以從專家那裡找到更快速的解決辦法,Envato有眾多的專家們隨時準備幫助你重新為你添加樣式或者自定義所有種類的網頁組件

Web component services on Envato Studio

關於瀏覽器的快速筆記

當我們涉及到以WebKit為基礎的瀏覽器的時候,我們本質上是在說Apple的Safari和Google Chrome。他們兩加起來大約佔據了超過40%的全部桌面瀏覽器市場。 對於平板電腦來說,Apple的iPad總是會使用Webkit無論它使用的是任何公司的瀏覽器。 Google同時也添加了Chrome到它的安卓系統以及Chromebooks裡,當然了,這些都是基於Google Chrome的。

看到這些數據以後,我們應該不難想像在不久的將來,滾動條的樣式化一定是很有前景的。


步驟1:一個有滾動條的簡單頁面

在我們可以實際的使用CSS來創建樣式並開始這個教程之前,我們需要一個可以正常工作的樣例;一個擁有滾動條的頁面。通常來說,滾動條在滿足以下條件時可見:

  • 文字內容比可見的窗口區域要大(一個滾動條將在右側顯示)。
  • 一個包含了足夠文字的textarea,這樣滾動條也會出現。
  • 一個iframe用來顯示一個不同的頁面。
  • 一個div或者任何其他的區塊元素並且包含了overflow屬性集的。

為了實現這個樣例,我們將使用最後一個選項,這裡是我的最初的結構代碼:

這只是一個div以及一大堆虛擬的內容,然後這裡是最開始的CSS,它會設置一些固定的尺寸和橫向及縱向滾動條的觸發器:

你應該會看到一些結果看起來像下面這樣:


步驟2:開始針對Webkit內核瀏覽器的代碼

有一段時間以前(幾年前)CSS偽類元素被從Webkit內核瀏覽器開發出來針對滾動條,正是這樣才帶給了我們根據主題來改變滾動條樣式的可能性。

讓我們開始添加一些樣式,使用-webkit-前綴以及wenkit的自定義滾動條屬性。記得,我將只會演示最基本的CSS屬性來讓你明白原理,更多的解釋你可以看到我包含在了註釋裡。

當這個偽類元素顯示時,WebKit會關閉瀏覽器自帶的滾動條渲染並僅僅使用CSS裡提供的樣式信息。 ——Surfin' Safari

那麼現在我們需要添加一些其他的偽類元素:

在添加了這些CSS之後你,你應該可以看到下面的效果(再一次強調,只是在Webkit內核的瀏覽器)。

你猜怎麼樣? IE瀏覽器有它自己的滾動條樣式!

是的——事實上,IE是第一個支持用CSS來為滾動條添加樣式的瀏覽器,這個可以追溯到IE5.5的版本,但是只有顏色可以改變。

這個內容可以被用在今天;看看下面這個單個的IE9屬性,僅供展示。

我們來看看最終結果:


步驟3:非Webkit瀏覽器的Fallback功能

完成了Webkit的部分,Firefox、IE和Opera也可以來分享這一部分的快樂,對於他們,我們有一個非常漂亮的fallback來實現這個功能,我們需要用到jScrollPane,這個jQuery插件是由Kelvin Luck開發的,而且它會是我們今天的救星。

Kelvin的網站上有很多很好的樣例,但是對於基本的使用來說,我們需要的就是下載jQuery以及這個jScrollPane的文件並將它們導入到頁面中,你可以使用以下方式:

為了做到匹配我們的主題,讓我們打開jquery.jscrollpane.css然後編輯以下幾行,來改變顏色的值(為了增強性能,你可能希望將所有的樣式都放到你自己的文件裡):

這裡是一個你將要看到的Firefox瀏覽器結果的屏幕截圖:


結語

在線程序諸如Gmail和Google+(以及其他很多的案例)都已經包含了這個想法了,而且如果這個勢頭繼續下去,可能Firefox和IE也會同時提供出他們自己的解決方案。

我希望你很享受這個小技巧,我也很期待看到你能將這個滾動條的設計運用到你自己的項目中去!


更多的資源

Envato Market上可自定義的滾動條

如果你正在尋找現成的解決辦法,Envato Market提供給你一個集合的滾動條,你可以簡單的將它們插入到你的網站中來達到各種不同的效果。這裡是其中的一些素材:

1. Lazybars - 主題可變的自適應滾動條jQuery插件

Lazybars是一個簡單易用,主題可變的jQuery滾動條插件,你僅僅需要添加一個class名字到任何你網站上可以滾動的元素上即可實現這個滾動條效果。

使用與Lazybars一起綁定的主題,或者使用一些簡單的CSS來創建你自己的主題。

Lazybars - Themeable responsive scrollbar jQuery plugin
Lazybars - 主題可變的自適應滾動條jQuery插件

2. Fancy滾動條 - Wordpress

“Fancy Scrollbar – WordPress”是一個你可以允許你在WordPress網站上創建自定義滾動條的插件,它有很多自定義的選項,你可以自定義顏色、特效、滾動延遲、軌道剝離、以及更多其他的參數。

Fancy Scrollbar - WordPress
Fancy滾動條 - WordPress

3. 絕好的自定義滾動條

這個絕好的自定義滾動條是一個可以被高度自定義化的滾動條jQuery插件,它可以被用在你的WordPress網站上,擁有了這個插件,你可以自定義你網站的滾動條,並且你可以在你想要的任何地方植入自定義樣式的滾動條並且只需要輸入短代碼即可,甚至是在主題的文件裡。

Awesome Custom Scrollbar
絕好的自定義滾動條

4. DZS滾動條

DZS滾動條為你的網站提供了一個你可以通過CSS非常簡單的自定義的滾動條,當然這是在其包括的三個皮膚並不能滿足你的情況下。 它同時具有其他高級功能,例如鼠標懸停即滾動,或者鼠標移開即淡出等。而且它與iPhone/iPad兼容。

DZS Scroller
DZS滾動條

5. CSS3滾動條樣式

它簡單易用,漂亮且色彩豐富,以CSS3為基礎的滾動條可以簡單的加入到你已有的CSS文件中,即可你就能享受這個新的CSS3滾動條。

CSS3 Scrollbar Styles
CSS3滾動條樣式
关注我们的公众号
Advertisement
Advertisement
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.