99热在线精品一区二区三区_国产伦精品一区二区三区女破破_亚洲一区二区三区无码_精品国产欧美日韩另类一区

配置 H5的滾動條樣式示例代碼有不少的小伙伴在網(wǎng)上尋找，本篇文章 好程序員 小編和大家分享一下配置 H5的滾動條樣式示例代碼，希望對HTML5開發(fā)感興趣的小伙伴有所幫助，下面我們一塊來看一下吧：

創(chuàng)新互聯(lián)建站是一家專注于成都做網(wǎng)站、成都網(wǎng)站建設(shè)、成都外貿(mào)網(wǎng)站建設(shè)和多線BGP機(jī)房的網(wǎng)絡(luò)公司，有著豐富的建站經(jīng)驗(yàn)和案例。

/  滾動條的滑軌背景顏色  /

::-webkit-scrollbar-track {

background-color: #b46868;

}

/  滑塊顏色  /

::-webkit-scrollbar-thumb {

background-color: rgba(0, 0, 0, 0.2);

}

/  滑軌兩頭的監(jiān)聽按鈕顏色  /

::-webkit-scrollbar-button {

background-color: #7c2929;

}

/  橫向滾動條和縱向滾動條相交處尖角的顏色  /

::-webkit-scrollbar-corner {

background-color: black;

}

// IE 自己的設(shè)置方法，并且是第一個可以自定義滾動條的瀏覽器，從IE5.5開始兼容

body {

scrollbar-face-color: #b46868;

}

舉例

/  Document scrollbar  /

::-webkit-scrollbar {

width: 8px;

}

::-webkit-scrollbar-track {

box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);

border-radius: 10px;

}

::-webkit-scrollbar-thumb {

border-radius: 10px;

box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5);

}

/  Scrollable element  /

.some-element::webkit-scrollbar {

}

Lorem ipsum dolor sit amet consectetur adipisicing elit. Iure id exercitationem nulla qui repellat laborum vitae, molestias tempora velit natus. Quas, assumenda nisi. Quisquam enim qui iure, consequatur velit sit?

當(dāng)前文章：好程序員教程之配置H5的滾動條樣式示例代碼
鏈接URL：http://www.ef60e0e.cn/article/gegiso.html