建站
咨詢
售后
建站咨詢
新聞中心
這里有您想知道的互聯(lián)網(wǎng)營(yíng)銷(xiāo)解決方案
web前端入門(mén)到實(shí)戰(zhàn)：CSS設(shè)置滾動(dòng)條樣式
webkit滾動(dòng)條樣式重置
1、scrollbar包含scrollbar buttons和一個(gè)track。track進(jìn)一步細(xì)分為track pieces和thumb。trace pieces為thumb的上半部分和半下部分。
2、scrollbar corner為橫向和豎向的交叉角區(qū)域
3、resize用來(lái)設(shè)置滾動(dòng)條的交匯處上用于拖動(dòng)調(diào)整元素大小的小控件
成都創(chuàng)新互聯(lián)于2013年成立，是專業(yè)互聯(lián)網(wǎng)技術(shù)服務(wù)公司，擁有項(xiàng)目成都網(wǎng)站建設(shè)、網(wǎng)站設(shè)計(jì)網(wǎng)站策劃，項(xiàng)目實(shí)施與項(xiàng)目整合能力。我們以讓每一個(gè)夢(mèng)想脫穎而出為使命，1280元印臺(tái)做網(wǎng)站,已為上家服務(wù),為印臺(tái)各地企業(yè)和個(gè)人服務(wù),聯(lián)系電話:028-86922220
組成結(jié)構(gòu)圖如下：
一旦發(fā)現(xiàn)滾動(dòng)條的自定義樣式，瀏覽器的默認(rèn)樣式設(shè)置將會(huì)失效，只使用在css定義的樣式。也就意味值不能單獨(dú)只設(shè)置scrollbar button或scrollbar track。
-webkit-scrollbar /* 滾動(dòng)條整體部分，重置時(shí)必須要設(shè)置 */
-webkit-scrollbar-button /* 滾動(dòng)條的軌道的兩端按鈕 */
-webkit-scrollbar-track /* 滾動(dòng)條的軌道（包含thumb和trace-piece）*/
-webkit-scrollbar-track-piece /* 軌道中下方塊的上下(左右)部分*/
-webkit-scrollbar-thumb /*滾動(dòng)條里面的小方塊*/
-webkit-scrollbar-corner /* 垂直和水平的交叉角 */
-webkit-resize // 滾動(dòng)條的交匯處上用于拖動(dòng)調(diào)整元素大小的小控件 */
web前端開(kāi)發(fā)學(xué)習(xí)Q-q-u-n：784783012 ，分享學(xué)習(xí)的方法和需要注意的小細(xì)節(jié)，不停更新最新的教程和學(xué)習(xí)方法
（詳細(xì)的前端項(xiàng)目實(shí)戰(zhàn)教學(xué)視頻，PDF）可以結(jié)合以下偽類(lèi)進(jìn)行設(shè)置（不同的操作系統(tǒng)瀏覽器滾動(dòng)條可能不一樣，所有可以根據(jù)下面?zhèn)晤?lèi)來(lái)設(shè)置）：
- :horizontal 水平方向的track、track-piect、thumb
- :vertica 垂直方向的track、track-piect、thumb
- :decrement 向上和向左按鈕的button、向上或向左的track-piece
- :increment 向下和向右按鈕的button、向下和向右的track-piece
- :start 適用于buttons和track pieces,對(duì)象（buttons 或 trace piece）是否放在滑塊的前面
- :end 適用于buttons和track pieces,對(duì)象（buttons 或 trace piece）是否放在滑塊的后面
- :double-button 適用于buttons和track pieces，軌道結(jié)束的位置是否是一對(duì)按鈕
- :single-button 適用于buttons和track pieces，軌道結(jié)束的位置是否是一個(gè)按鈕
- :no-button 適用于track pieces，軌道結(jié)束的位置沒(méi)有按鈕
- :corner-present 適用于所有scrollbar,滾動(dòng)條的角落是否存在
- :window-inactive 適用于所有scrollbar,包含滾動(dòng)條的區(qū)域，焦點(diǎn)不在該窗口的時(shí)候
- :enabled, :disabled, :hover , :active 這些偽類(lèi)同樣適用
IE滾動(dòng)條樣式重置
IE中只能修改滾動(dòng)條顏色
scrollbar-arrow-color:#f2f2f3; /*上下箭頭*/
scrollbar-track-color /*底層背景色*/
scrollbar-face-color /*滾動(dòng)條前景色，對(duì)應(yīng)thumb*/
scrollbar-shadow-color /*滾動(dòng)條邊線色,thubm的border*/
scrollbar-highlight-color /*滾動(dòng)條整體顏色*/
scrollbar-base-color /* 滾動(dòng)條基準(zhǔn)顏色 */
web前端開(kāi)發(fā)學(xué)習(xí)Q-q-u-n：784783012 ，分享學(xué)習(xí)的方法和需要注意的小細(xì)節(jié)，不停更新最新的教程和學(xué)習(xí)方法
（詳細(xì)的前端項(xiàng)目實(shí)戰(zhàn)教學(xué)視頻，PDF）本文題目：web前端入門(mén)到實(shí)戰(zhàn)：CSS設(shè)置滾動(dòng)條樣式
地址分享：http://www.dlmjj.cn/article/ijepcp.html
