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

創(chuàng)新互聯(lián)建站是一家專業(yè)提供婺城企業(yè)網站建設,專注與成都網站建設、成都做網站、H5高端網站建設、小程序制作等業(yè)務。10年已為婺城眾多企業(yè)、政府機構等服務。創(chuàng)新互聯(lián)專業(yè)網站制作公司優(yōu)惠進行中。

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

::-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 自己的設置方法，并且是第一個可以自定義滾動條的瀏覽器，從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?

文章名稱：好程序員教程之配置H5的滾動條樣式示例代碼-創(chuàng)新互聯(lián)
分享URL：http://weahome.cn/article/ccipdh.html