您現在的位置是:電腦技術吧?>? 組裝維修 ??>??自定義滾動條樣式,html自定義滾動條樣式??>??正文詳情

自定義滾動條樣式,html自定義滾動條樣式

渠安寒2019-11-11 16:10:27 人圍觀
簡介html 滾動條樣式相信很多人都遇到過在設計中定制滾動條樣式的情況。在此之前,我試圖說服設計師接受瀏覽器自己的滾動條樣式,但這只能避免或不能解決問題。最近,我在項目中認識

相信很多人都遇到過在設計中自定義滾動條樣式的情景,之前我都是努力說服設計師接受瀏覽器自帶的滾動條樣式,但是這樣只能規避還是解決不了問題,最近在項目中遇到了,正好來總結一下。

當然,兼容所有瀏覽器的滾動條樣式目前是不存在的。

  IE下的滾動條樣式  IE是最早提供滾動條的樣式支持,嗯,好多年了,但是其它瀏覽器一直沒有支持,IE獨孤求敗了。

  這些樣式規則很簡單:  scrollbar-arrow-color: color; /*三角箭頭的顏色*/  scrollbar-face-color: color; /*立體滾動條的顏色(包括箭頭部分的背景色)*/  scrollbar-3dlight-color: color; /*立體滾動條亮邊的顏色*/  scrollbar-highlight-color: color; /*滾動條的高亮顏色(左陰影?)*/  scrollbar-shadow-color: color; /*立體滾動條陰影的顏色*/  scrollbar-darkshadow-color: color; /*立體滾動條外陰影的顏色*/  scrollbar-track-color: color; /*立體滾動條背景顏色*/  scrollbar-base-color:color; /*滾動條的基色*/  大概就這些,你也可以定義cursor來定義滾動條的鼠標手勢。

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

  選中CSS選項即可自動生成CSS樣式,這里不再過多的介紹了。

嗯,多謝大貓老師推薦。

  webkit的自定義滾動條樣式  yes,這里才是今天要重點介紹的。

  從上一部分的樣式名中就可以看到,IE只能定義相關部分的color等屬性,這樣太不靈活了。

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

  不過,webkit不再是用簡單的幾個CSS屬性,而是一坨的CSS偽元素:  ::-webkit-scrollbar 滾動條整體部分  ::-webkit-scrollbar-button 滾動條兩端的按鈕  ::-webkit-scrollbar-track 外層軌道  ::-webkit-scrollbar-track-piece 內層軌道,滾動條中間部分(除去)  ::-webkit-scrollbar-thumb (拖動條?滑塊?滾動條里面可以拖動的那個,腫么翻譯好呢?)  ::-webkit-scrollbar-corner 邊角  ::-webkit-resizer 定義右下角拖動塊的樣式  通過這些偽元素,可以完全的重寫一個網站的滾動條樣式。

  當然webkit提供的不止這些,還有很多偽類,可以更豐富滾動條樣式:  :horizontal horizontal偽類應用于水平方向的滾動條  :vertical vertical偽類應用于豎直方向的滾動條  :decrement decrement偽類應用于按鈕和內層軌道(track piece)。

它用來指示按鈕或者內層軌道是否會減小視窗的位置(比如,垂直滾動條的上面,水平滾動條的左邊。

)  :increment increment偽類和decrement類似,用來指示按鈕或內層軌道是否會增大視窗的位置(比如,垂直滾動條的下面和水平滾動條的右邊。

)  :start start偽類也應用于按鈕和滑塊。

它用來定義對象是否放到滑塊的前面。

  :end 類似于start偽類,標識對象是否放到滑塊的后面。

  :double-button 該偽類以用于按鈕和內層軌道。

用于判斷一個按鈕是不是放在滾動條同一端的一對按鈕中的一個。

對于內層軌道來說,它表示內層軌道是否緊靠一對按鈕。

  :single-button 類似于double-button偽類。

對按鈕來說,它用于判斷一個按鈕是否自己獨立的在滾動條的一段。

對內層軌道來說,它表示內層軌道是否緊靠一個single-button。

  :no-button 用于內層軌道,表示內層軌道是否要滾動到滾動條的終端,比如,滾動條兩端沒有按鈕的時候。

  :corner-present 用于所有滾動條軌道,指示滾動條圓角是否顯示。

  :window-inactive 用于所有的滾動條軌道,指示應用滾動條的某個頁面容器(元素)是否當前被激活。

(在webkit最近的版本中,該偽類也可以用于::selection偽元素。

webkit團隊有計劃擴展它并推動成為一個標準的偽類)  另外,:enabled、:disabled、:hover 和 :active 等偽類同樣可以用于滾動條中。

  關于具體的demo,這里不再做了,網上已經有很多demo可以參考,比如,webkit官方的這個,具體的線上項目中也有現成的例子,比如,QQ空間的簽到彈出框和豆瓣說的右側詳情欄(某條信息評論多的時候會顯示)。

  值得一提的是,webkit的這個偽類和偽元素的實現很強大,雖然類目有些多,但是我們可以把滾動條當成一個頁面元素來定義,也差不多可以用上一些高級的CSS3屬性,比如漸變、圓角、RGBa等等,當然有些地方也可以用圖片,然后圖片也可以轉換成Base64,總之,可以盡情發揮了。

  PS:中間部分術語翻譯不到位,歡迎斧正。

版權聲明:本文由 渠安寒 整理編輯。

原標題:怎么設置滾動條的樣式,自定義滾動條

轉載注明出處:http://www.dn9ww09s.icu/assemble/11748.html

文章評論

    共有條評論來說兩句吧...

    用戶名:

    驗證碼:

作者推薦

  • 聯想筆記本加什么內存條,聯想手提電腦加內存條

    聯想筆記本加什么內存條,聯想手提電腦加內存條 相關圖片筆記本怎么加內存條當我們長時間使用筆記本時,會感覺到筆記本的運行速度沒有以前快了。當我們打開電腦,打開一些軟件,運行空間就會變紅。這對我們的使用有著嚴重的影響,但...

  • 怎么做文字生成鏈接,怎么把鏈接變成文字

    怎么做文字生成鏈接,怎么把鏈接變成文字 相關圖片怎么轉發文字加鏈接一。雙擊。在CSS樣式表面板中打開T1樣式表,在這里定義它的塊鏈接樣式。點擊背景選項,首先在鏈接中添加背景色,這里選擇紅色,在分類欄中選擇邊框,然后在上...

  • 全能文件恢復軟件,全能文件恢復

    全能文件恢復軟件,全能文件恢復 相關圖片手機數據恢復軟件在我們的計算機操作過程中,有些用戶會根據需要對系統的硬盤進行分區。在操作過程中,由于操作不當或忘記備份文件,文件會因系統分區而被破壞。我們怎樣才能...

  • css的屬性有哪些,css屬性

    css的屬性有哪些,css屬性 相關圖片css display屬性在項目中遇到使用此屬性來設置文本的垂直顯示,但它只能在ie中使用,并且在其他瀏覽器中沒有好的替代方法語法:writing mode:LR TB | TB RL參css margin屬性...

  • 筆記本觸控板沒反應,聯想筆記本觸控板沒反應

    筆記本觸控板沒反應,聯想筆記本觸控板沒反應 相關圖片筆記本觸摸板失靈對于很多筆記本電腦用戶來說,使用過程中的一些小問題導致機器無法正常工作是很常見的事情。例如,當數據丟失且CD-ROM驅動器被禁用時,在“我的電腦”中找不到...

  • 顯示器圖標怎么變小,電腦顯示器圖標變大了怎么辦

    顯示器圖標怎么變小,電腦顯示器圖標變大了怎么辦 相關圖片電腦顯示器接下來,我們將以圖片的形式介紹這個圖標的制作過程。電腦開機不顯示桌面圖標...

  • ai文件如何轉換成電子搞文件,電腦ai文件用什么軟件打開

    ai文件如何轉換成電子搞文件,電腦ai文件用什么軟件打開 相關圖片ai軟件培訓我們的電腦上會有很多文件,但有些不知道是什么文件。直接打開時不能打開。很多人會對后綴為AI的文件感到困惑它們是什么文件?怎么能不打開呢?實際上,人工智能文件...

  • 如何系統還原,一鍵還原系統

    如何系統還原,一鍵還原系統 相關圖片raid6數據恢復很多人使用備份的習慣,系統也可以備份。當需要對整個系統進行備份時,可以通過系統還原軟件進行還原。小編為大家分享一款不錯的系統還原軟件。系統還原軟件可以備...

  • 標簽的定義,給自己定義一個標簽

    標簽的定義,給自己定義一個標簽 相關圖片A標簽HTML 5!DOCTYPE標記定義和用法!DOCTYPE聲明必須位于HTML 5文檔的第一行,即HTML標記之前。標記告訴瀏覽器用于文檔的HTML規范。DOC自定標簽...

  • wow大腳配置文件下載失敗,大腳更新基礎插件失敗

    wow大腳配置文件下載失敗,大腳更新基礎插件失敗 相關圖片大腳單體插件刷新不出來不得不提的是,作為一款風靡全球的魔獸網游,其形象引擎在過去的10年中不斷更新。Bigfoot插件也一樣,但用戶似乎不知道更新Bigfoot插件。有些用戶更新失敗大...

熱評文章

  • 遠程控制電腦,電腦怎樣遠程控制電腦

    遠程控制電腦,電腦怎樣遠程控制電腦 相關圖片懷疑電腦被遠程控制隨著科學技術的不斷發展,手機和電腦已經成為人們生活中非常重要的東西。它們在人們的工作和生活中起著重要的作用。但電腦的體積還是比較大的。與手機相比...

  • 激活錯誤0xc004f063,激活錯誤0xc004f074

    激活錯誤0xc004f063,激活錯誤0xc004f074 相關圖片錯誤0xc004f050現在使用win10的用戶越來越多。如果沒有win10,用戶也在前往win10系統的路上。當然,有些用戶在激活win10時會遇到一些錯誤,比如無法激活系統錯誤提示0x80072ee7 激活失敗...

  • 水粉筆觸技巧,什么是筆觸

    水粉筆觸技巧,什么是筆觸 相關圖片畫色彩的筆觸技巧首先看最后的效果:1。首先創建一個800*600px和黑色背景2的新畫布。然后下載下面的pen PNG源文件使用。將源文件中的路徑復制到畫布上,您會發現筆中還有畫色彩的筆...

  • 聯想筆記本的觸摸板怎么打開,聯想筆記本觸摸板設置

    聯想筆記本的觸摸板怎么打開,聯想筆記本觸摸板設置 相關圖片筆記本觸控板怎么打開許多筆記本用戶對筆記本觸摸板了解不多,而且他們一般也不怎么使用。更多的用戶只是選擇使用USB鼠標和鍵盤。如果需要操作,他們會發現他們不知道如何打開...

  • 如何增加表格行列,電子表格增加行列

    如何增加表格行列,電子表格增加行列 相關圖片excel增加表格一。添加新行或列。在軟件右側的插入中選擇布局項,并在要向其添加行或列的單元格中暫停光標。然后我們可以向上、向下、向左和向右插入行或列2。刪除行或列。選擇...

  • 蘋果連接電腦,蘋果怎樣連接電腦

    蘋果連接電腦,蘋果怎樣連接電腦 相關圖片蘋果手機與電腦連接方法事實上,隨著蘋果對產品的關注度越來越高,越來越多的用戶開始使用它。對于iPhone,有時需要將手機連接到計算機并執行一些操作。那么用戶如何才能完成這...

  • office激活步驟,office激活

    office激活步驟,office激活 相關圖片office激活工具怎么用恐怕每個人的電腦里都安裝了辦公軟件。雖然office 2016已經推出了一段時間,但許多PPT教程大多基于office 2010,有些用戶只是想激活officeoffice2010激活教程...

  • 開過光的吊墜,寶石光吊墜

    開過光的吊墜,寶石光吊墜 相關圖片開了光的吊墜注意事項一。創建一個新文件(畫布應該是透明的)2。輸入你想寫的單詞3。將畫布展開到800%Ctrl 4。使用鉛筆工具在放大的畫布上繪制所需的圖案框架。你可以直接用材料...

  • 電腦藍屏怎么辦恢復,電腦突然藍屏怎么修復

    電腦藍屏怎么辦恢復,電腦突然藍屏怎么修復 相關圖片筆記本電腦藍屏怎么辦恢復如何解決電腦藍屏問題?藍屏解決方案有很多原因。讓我們看看是什么導致了藍屏解決方案。我希望它能幫助你找出問題和解決辦法。如何解決電腦藍屏問題...

  • flash動畫,如何做flash動畫ppt

    flash動畫,如何做flash動畫ppt 相關圖片怎么在ppt里加入flash動畫今天,我們將教你如何在頁面中插入flash動畫。flash動畫格式包括SWF和flv。本教程主要以swf格式為例進行說明。首先打開Dreamweaver,創建一ppt無法播放flash動畫...

關注微信

变脸官网查询