好程序員教程之配置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的滾動條樣式示例代碼。