最新国产精品亚洲_亚洲欧洲日产国码av系列天堂_无码超乳爆乳中文字幕久久_人妻妺妺窝人体色www聚色窝

相信(xin)很多人(ren)都(dou)(dou)遇(yu)到(dao)過在(zai)設計(ji)中(zhong)(zhong)自定義(yi)滾(gun)動條(tiao)樣式(shi)(shi)的情景(jing)，之前(qian)我都(dou)(dou)是(shi)努力說服設計(ji)師(shi)接(jie)受瀏覽(lan)器(qi)自帶的滾(gun)動條(tiao)樣式(shi)(shi)，但(dan)是(shi)這樣只能(neng)規避還是(shi)解(jie)決不了問題，最近在(zai)項目(mu)中(zhong)(zhong)遇(yu)到(dao)了，正好來(lai)總結一下(xia)。當然(ran)，兼(jian)容所有瀏覽(lan)器(qi)的滾(gun)動條(tiao)樣式(shi)(shi)目(mu)前(qian)是(shi)不存在(zai)的。

南通網站建設、南通網站制作、南通做網站首選南通康納網絡科技 shua2844.tj.cn

IE下的滾動條樣式

IE是(shi)最早提供滾動條的樣式支持(chi)(chi)，好多年了(le)，但是(shi)其它瀏覽(lan)器(qi)一直沒有支持(chi)(chi)，IE獨(du)孤求(qiu)敗了(le)。

這些樣式規則很簡單：

scrollbar-arrow-color: color; /*三角箭頭(tou)的顏色*/

scrollbar-face-color: color; /*立(li)體滾(gun)動(dong)條(tiao)的顏(yan)色(se)（包括箭頭部分的背景色(se)）*/

scrollbar-3dlight-color: color; /*立體滾動條亮邊(bian)的顏色(se)*/

scrollbar-highlight-color: color; /*滾動條的高亮顏色（左(zuo)陰(yin)影？）*/

scrollbar-shadow-color: color; /*立體滾動條陰影的(de)顏色*/

scrollbar-darkshadow-color: color; /*立體滾動條外陰影的顏色*/

scrollbar-track-color: color; /*立體滾動條背景顏色*/

scrollbar-base-color: color; /*滾動條的基(ji)色*/

大(da)概就這些，你(ni)也可以定義(yi)(yi)cursor來定義(yi)(yi)滾動條(tiao)的鼠標(biao)手勢(shi)。

這里，很久以前danger做了個基于Flash的可視化工具，簡單但是好用：

選中CSS選項即可自(zi)動生成(cheng)CSS樣式，這里不(bu)再過(guo)多的介紹了(le)。嗯(ng)，多謝大貓老濕推(tui)薦。

webkit的自定義滾動條樣式

yes，這里(li)才是今(jin)天要重點介紹的。

從上一(yi)部分的樣(yang)式名中就可以看到，IE只能定義相關部分的color等(deng)屬(shu)性，這樣(yang)太(tai)不(bu)靈活了。

webkit最近實現了對滾動條的支持，先看一個簡單的demo：

不過，webkit不再是用簡單的幾個CSS屬性，而(er)是一坨的CSS偽(wei)元素(su)：

-webkit-scrollbar 滾動條(tiao)整(zheng)體部(bu)分

-webkit-scrollbar-button 滾動條兩端(duan)的按鈕

-webkit-scrollbar-track 外層軌道

-webkit-scrollbar-track-piece 內層軌(gui)道，滾動條中間部分（除(chu)去）

-webkit-scrollbar-thumb （拖動條？滑塊(kuai)？滾動條里(li)面可(ke)以拖動的(de)那個，腫么翻譯好呢？）

-webkit-scrollbar-corner 邊角

-webkit-resizer 定義右下角拖動塊的樣式(shi)

通過(guo)這些偽元素，可以(yi)完全的重寫(xie)一(yi)個(ge)網站的滾動(dong)條樣式。

當然webkit提供的不止這些，還有很多偽類(lei)，可以更豐(feng)富滾(gun)動條樣式：

:horizontal – horizontal偽類應用(yong)于水(shui)平方向的滾動條

:vertical – vertical偽類(lei)應用于豎直方向的滾動條

:decrement – decrement偽類應用于按(an)鈕和內層軌道（track piece）。它用來指(zhi)示按(an)鈕或(huo)者內層軌道是(shi)否會減小視(shi)窗的位置（比如，垂直滾動條的上面，水(shui)平滾動條的左邊。）

:increment – increment偽類和decrement類似(si)，用來(lai)指示(shi)按鈕或內層(ceng)軌(gui)道是否會增大視窗(chuang)的(de)(de)位置（比如，垂直滾(gun)動條(tiao)的(de)(de)下(xia)面和水平滾(gun)動條(tiao)的(de)(de)右(you)邊。）

:start – start偽(wei)類也應(ying)用于按鈕和滑(hua)塊(kuai)。它用來定義對象是否放到(dao)滑(hua)塊(kuai)的前面。

:end – 類似于start偽類，標識對(dui)象是否放到滑(hua)塊的后面。

:double-button – 該偽類以(yi)用(yong)于(yu)按(an)鈕(niu)和內層(ceng)軌道。用(yong)于(yu)判(pan)斷一(yi)個按(an)鈕(niu)是(shi)不是(shi)放在滾動條(tiao)同一(yi)端的一(yi)對(dui)(dui)(dui)按(an)鈕(niu)中的一(yi)個。對(dui)(dui)(dui)于(yu)內層(ceng)軌道來說(shuo)，它表示內層(ceng)軌道是(shi)否緊靠一(yi)對(dui)(dui)(dui)按(an)鈕(niu)。

:single-button – 類似于double-button偽類。對(dui)按鈕(niu)來(lai)說(shuo)，它用于判斷一個按鈕(niu)是否(fou)自己獨(du)立的在(zai)滾(gun)動(dong)條的一段(duan)。對(dui)內層軌道來(lai)說(shuo)，它表(biao)示內層軌道是否(fou)緊靠(kao)一個single-button。

:no-button – 用于內層軌(gui)道，表示內層軌(gui)道是否要滾(gun)動(dong)到滾(gun)動(dong)條(tiao)的(de)終端，比如，滾(gun)動(dong)條(tiao)兩(liang)端沒有按鈕的(de)時候。

:corner-present – 用于所有滾動條(tiao)軌(gui)道，指示(shi)滾動條(tiao)圓角(jiao)是否顯示(shi)。

:window-inactive – 用(yong)(yong)于所有的滾動條軌道(dao)，指(zhi)示應用(yong)(yong)滾動條的某(mou)個頁面容器（元素(su)）是(shi)否當前被激(ji)活。（在webkit最近(jin)的版本中，該偽(wei)類(lei)也可(ke)以用(yong)(yong)于：：selection偽(wei)元素(su)。webkit團隊有計劃擴展它并推(tui)動成為一個標準的偽(wei)類(lei)）

另外，:enabled、:disabled、:hover 和 :active 等偽類(lei)同(tong)樣可以用于滾動條中。

關于(yu)具體的(de)demo，這里不再(zai)做了(le)，網上已經有很多demo可以參考，比如，webkit官方的(de)這個，具體的(de)線(xian)上項(xiang)目中也有現成的(de)例子(zi)，比如，QQ空間的(de)簽到(dao)彈出(chu)框和豆(dou)瓣說(shuo)的(de)右(you)側(ce)詳情(qing)欄（某條(tiao)信息評(ping)論多的(de)時候(hou)會(hui)顯示(shi)）。

值得一提(ti)的(de)是，webkit的(de)這個偽類和(he)偽元素的(de)實現很強(qiang)大，雖然類目有些多，但(dan)是我們(men)可(ke)以把(ba)滾動條當(dang)成(cheng)一個頁面(mian)元素來定義，也(ye)差不(bu)多可(ke)以用上一些高級的(de)CSS3屬性，比如(ru)漸(jian)變(bian)、圓角、RGBa等等，當(dang)然有些地方也(ye)可(ke)以用圖片(pian)，然后圖片(pian)也(ye)可(ke)以轉(zhuan)換成(cheng)Base64，總之(zhi)，可(ke)以盡(jin)情發揮(hui)了。 

南通網站建設、南通網站制作、南通做網站首選南通康納網絡科技 shua2844.tj.cn