好程式設計師教程之配置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?