這期內(nèi)容當中小編將會給大家?guī)碛嘘P怎么在CSS中設置滾動條樣式,文章內(nèi)容豐富且以專業(yè)的角度為大家分析和敘述,閱讀完這篇文章希望大家可以有所收獲。
我們注重客戶提出的每個要求,我們充分考慮每一個細節(jié),我們積極的做好網(wǎng)站設計制作、成都網(wǎng)站建設服務,我們努力開拓更好的視野,通過不懈的努力,創(chuàng)新互聯(lián)贏得了業(yè)內(nèi)的良好聲譽,這一切,也不斷的激勵著我們更好的服務客戶。 主要業(yè)務:網(wǎng)站建設,網(wǎng)站制作,網(wǎng)站設計,微信小程序開發(fā),網(wǎng)站開發(fā),技術開發(fā)實力,DIV+CSS,PHP及ASP,ASP.Net,SQL數(shù)據(jù)庫的技術開發(fā)工程師。
CSS 設置滾動條樣式的實現(xiàn)代碼如下所示:
•::-webkit-scrollbar 滾動條整體部分
•::-webkit-scrollbar-thumb 滾動條里面的小方塊,能向上向下移動(或往左往右移動,取決于是垂直滾動條還是水平滾動條)
•::-webkit-scrollbar-track 滾動條的軌道(里面裝有Thumb)
•::-webkit-scrollbar-button 滾動條的軌道的兩端按鈕,允許通過點擊微調(diào)小方塊的位置。
•::-webkit-scrollbar-track-piece 內(nèi)層軌道,滾動條中間部分(除去)
•::-webkit-scrollbar-corner 邊角,即兩個滾動條的交匯處
•::-webkit-resizer 兩個滾動條的交匯處上用于通過拖動調(diào)整元素大小的小控件
/*定義滾動條高寬及背景 高寬分別對應橫豎滾動條的尺寸*/ ::-webkit-scrollbar { width: 16px; height: 16px; background-color: #F5F5F5; } /*定義滾動條軌道 內(nèi)陰影+圓角*/ ::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); border-radius: 10px; background-color: #F5F5F5; } /*定義滑塊 內(nèi)陰影+圓角*/ ::-webkit-scrollbar-thumb { border-radius: 10px; -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3); background-color: #555; }
詳細設置
定義滾動條就是利用偽元素與偽類,那什么是偽元素和偽類呢?
偽類大家應該很熟悉:link,:focus,:hover,此外CSS3中又增加了許多偽類選擇器,如:nth-child,:last-child,:nth-last-of-type()等。
CSS中的偽元素大家以前看過::first-line,:first-letter,:before,:after。那么在CSS3中,偽元素進行了調(diào)整,在以前的基礎上增加了一個“:”也就是現(xiàn)在變成了“::first-letter,::first-line,::before,::after”,另外CSS3還增加了一個“::selection”。兩個“::”和一個“:”在css3中主要用來區(qū)分偽類和偽元素。
webkit的偽類和偽元素的實現(xiàn)很強,可以把滾動條當成一個頁面元素來定義,再結(jié)合一些高級的CSS3屬性,比如漸變、圓角、RGBa等等。然后如果有些地方要用圖片,可以把圖片也可以轉(zhuǎn)換成Base64,不然每次都得加載那個多個圖片,增加請求數(shù)。
任何對象都可以設置:邊框、陰影、背景圖片等等,創(chuàng)建的滾動條任然會按照操作系統(tǒng)本身的設置來完成其交互的行為。下面的偽類可以應用到上面的偽元素中。有點小復雜,具體怎么寫可以看第一個demo,那里也有注釋。
:horizontal //horizontal偽類適用于任何水平方向上的滾動條 :vertical //vertical偽類適用于任何垂直方向的滾動條 :decrement //decrement偽類適用于按鈕和軌道碎片。表示遞減的按鈕或軌道碎片,例如可以使區(qū)域向上或者向右移動的區(qū)域和按鈕 :increment //increment偽類適用于按鈕和軌道碎片。表示遞增的按鈕或軌道碎片,例如可以使區(qū)域向下或者向左移動的區(qū)域和按鈕 :start //start偽類適用于按鈕和軌道碎片。表示對象(按鈕 軌道碎片)是否放在滑塊的前面 :end //end偽類適用于按鈕和軌道碎片。表示對象(按鈕 軌道碎片)是否放在滑塊的后面 :double-button //double-button偽類適用于按鈕和軌道碎片。判斷軌道結(jié)束的位置是否是一對按鈕。也就是軌道碎片緊挨著一對在一起的按鈕。 :single-button //single-button偽類適用于按鈕和軌道碎片。判斷軌道結(jié)束的位置是否是一個按鈕。也就是軌道碎片緊挨著一個單獨的按鈕。 :no-button no-button偽類表示軌道結(jié)束的位置沒有按鈕。 :corner-present //corner-present偽類表示滾動條的角落是否存在。 :window-inactive //適用于所有滾動條,表示包含滾動條的區(qū)域,焦點不在該窗口的時候。 ::-webkit-scrollbar-track-piece:start { /*滾動條上半邊或左半邊*/ } ::-webkit-scrollbar-thumb:window-inactive { /*當焦點不在當前區(qū)域滑塊的狀態(tài)*/ } ::-webkit-scrollbar-button:horizontal:decrement:hover { /*當鼠標在水平滾動條下面的按鈕上的狀態(tài)*/ }
css的選擇器可以分為三大類,即id選擇器、class選擇器、標簽選擇器。它們之間可以有多種組合,有后代選擇器、子選擇器、偽類選擇器、通用選擇器、群組選擇器等等
上述就是小編為大家分享的怎么在CSS中設置滾動條樣式了,如果剛好有類似的疑惑,不妨參照上述分析進行理解。如果想知道更多相關知識,歡迎關注創(chuàng)新互聯(lián)行業(yè)資訊頻道。
文章標題:怎么在CSS中設置滾動條樣式
文章網(wǎng)址:http://muchs.cn/article48/jcpgep.html
成都網(wǎng)站建設公司_創(chuàng)新互聯(lián),為您提供網(wǎng)站排名、微信小程序、網(wǎng)站設計公司、動態(tài)網(wǎng)站、微信公眾號、關鍵詞優(yōu)化
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時需注明來源: 創(chuàng)新互聯(lián)