好程序員教程之配置H5的滾動條樣式示例代碼

配置H5的滾動條樣式示例代碼有很多的小夥伴在網上尋找，本篇文章好程序員小編和你們分享一下配置H5的滾動條樣式示例代碼，但願對HTML5開發感興趣的小夥伴有所幫助，下面咱們一塊來看一下吧：
/ 滾動條的滑軌背景顏色 /
::-webkit-scrollbar-track {
background-color: #b46868;
}
/ 滑塊顏色 /
::-webkit-scrollbar-thumb {
background-color: rgba(0, 0, 0, 0.2);
}
/ 滑軌兩頭的監聽按鈕顏色 /
::-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?
以上就是好程序員HTML5教程小編給你們分享的配置H5的滾動條樣式示例代碼，想要了解更多內容的小夥伴能夠登陸好程序員官網諮詢，好程序員是專業的HTML5培訓機構，不只有專業的老師和與時俱進的課程體系，還有大量的HTML5視頻教程供學員觀看學習，想要學好HTML5開發技術的小夥伴快快行動吧。