好程序員教程之配置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?