好程式設計師教程之配置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的滾動條樣