改變?yōu)g覽器默認(rèn)的滾動(dòng)條樣式:
創(chuàng)新互聯(lián)是一家專業(yè)提供田陽企業(yè)網(wǎng)站建設(shè),專注與網(wǎng)站制作、網(wǎng)站建設(shè)、H5響應(yīng)式網(wǎng)站、小程序制作等業(yè)務(wù)。10年已為田陽眾多企業(yè)、政府機(jī)構(gòu)等服務(wù)。創(chuàng)新互聯(lián)專業(yè)的建站公司優(yōu)惠進(jìn)行中。
//滾動(dòng)條凹槽的顏色,還可以設(shè)置邊框?qū)傩?/p>
::-webkit-scrollbar-track-piece {
background-color:#f8f8f8;?
}
//滾動(dòng)條的寬度
::-webkit-scrollbar {
width:9px;
height:9px;
}
//滾動(dòng)條的設(shè)置
::-webkit-scrollbar-thumb {
background-color:#dddddd;
background-clip:padding-box;
min-height:28px;
}
::-webkit-scrollbar-thumb:hover {
background-color:#bbb;
}
擴(kuò)展資料:
給某個(gè)div,class為test1加滾動(dòng)條樣式:
.test1::-webkit-scrollbar {
width: 8px;
}
.test1::-webkit-scrollbar-track {
background-color:red;
-webkit-border-radius: 2em;
-moz-border-radius: 2em;
border-radius:2em;
}
.test1::-webkit-scrollbar-thumb {
background-color:green;
-webkit-border-radius: 2em;
-moz-border-radius: 2em;
border-radius:2em;
}
在css樣式中設(shè)置瀏覽器滾動(dòng)條樣式操作步驟如下:
1.打開軟件,新建html文檔,如下圖紅框所示為新建界面。
2.在/head和body中間書寫hmtl代碼,div這里面輸入你想要輸入的內(nèi)容即可/div,如下圖紅框所示。
3.然后在body和/body中間書寫外層軌道css代碼:body::-webkit-scrollbar { width:20px; height:2px; background:#ccc; border-radius:10px;/*外層軌道*/} 。
這里主要是設(shè)置外層軌道的形狀和顏色,根據(jù)想要設(shè)置的樣式進(jìn)行調(diào)節(jié)即可,如下圖紅框所示。
4.然后在外層軌道下面書寫內(nèi)層軌道css代碼:body::-webkit-scrollbar-thumb{ display:block; width:6px; margin:0 auto; border-radius: 10px; background:red;/*內(nèi)層軌道*/}。
這里主要是設(shè)置內(nèi)層軌道的形狀和顏色,根據(jù)想要設(shè)置的樣式進(jìn)行調(diào)節(jié)即可,如下圖紅框所示。
5.以上代碼代碼輸入完成,就可以運(yùn)行看效果,效果如下紅框所示,滾動(dòng)條設(shè)置完成,如果不喜歡樣式,回去修改代碼屬性即可。
css可以通過為網(wǎng)頁元素設(shè)置滾動(dòng)條樣式使網(wǎng)頁元素的內(nèi)容實(shí)現(xiàn)滾動(dòng)。
css通過overflow屬性設(shè)置滾動(dòng)條示例:
html
head
style type="text/css"
div
{
background-color:#00FFFF;
width:150px;
height:150px;
overflow: scroll;
}
/style
/head
body
p如果元素中的內(nèi)容超出了給定的寬度和高度屬性,overflow 屬性可以確定是否顯示滾動(dòng)條等行為。/p
div
這個(gè)屬性定義溢出元素內(nèi)容區(qū)的內(nèi)容會(huì)如何處理。如果值為 scroll,不論是否需要,
用戶代理都會(huì)提供一種滾動(dòng)機(jī)制。因此,有可能即使元素框中可以放下所有內(nèi)容也會(huì)出現(xiàn)滾動(dòng)條。默認(rèn)值是 visible。
/div
/body
/html
效果圖
擴(kuò)展:
overflow屬性介紹:
overflow 屬性規(guī)定當(dāng)內(nèi)容溢出元素框時(shí)發(fā)生的事情。
說明
這個(gè)屬性定義溢出元素內(nèi)容區(qū)的內(nèi)容會(huì)如何處理。如果值為 scroll,不論是否需要,用戶代理都會(huì)提供一種滾動(dòng)機(jī)制。因此,有可能即使元素框中可以放下所有內(nèi)容也會(huì)出現(xiàn)滾動(dòng)條。
屬性值:
visible 默認(rèn)值。內(nèi)容不會(huì)被修剪,會(huì)呈現(xiàn)在元素框之外。
hidden 內(nèi)容會(huì)被修剪,并且其余內(nèi)容是不可見的。
scroll 內(nèi)容會(huì)被修剪,但是瀏覽器會(huì)顯示滾動(dòng)條以便查看其余的內(nèi)容。
auto 如果內(nèi)容被修剪,則瀏覽器會(huì)顯示滾動(dòng)條以便查看其余的內(nèi)容。
inherit 規(guī)定應(yīng)該從父元素繼承 overflow 屬性的值。
/*IE滾動(dòng)條顏色設(shè)置*/
body?{
scrollbar-arrow-color:#f2f2f3; /*上下箭頭*/
scrollbar-track-color:#1589ce; /*底層背景色*/
scrollbar-face-color:#27aeff; /*滾動(dòng)條前景色*/
scrollbar-Shadow-color:#1589ce; /*滾動(dòng)條邊線色*/
}
/*chrome滾動(dòng)條顏色設(shè)置*/
body::-webkit-scrollbar?{width:10px;?height:10px;?background-color:transparent;}?/*定義滾動(dòng)條高寬及背景?高寬分別對(duì)應(yīng)橫豎滾動(dòng)條的尺寸*/
body::-webkit-scrollbar-track?{background-color:#ccc;?border-radius:10px;?-webkit-box-shadow:inset?0?0?6px?rgba(0,0,0,0.3);}?/*定義滾動(dòng)條軌道?內(nèi)陰影+圓角*/
body::-webkit-scrollbar-thumb?{background-color:#555;?border-radius:10px;?-webkit-box-shadow:inset?0?0?6px?rgba(0,0,0,.3);}?/*定義滑塊?內(nèi)陰影+圓角*/