配置 H5的滾動條樣式示例代碼有不少的小伙伴在網(wǎng)上尋找，本篇文章 好程序員 小編和大家分享一下配置 H5的滾動條樣式示例代碼，希望對HTML5開發(fā)感興趣的小伙伴有所幫助，下面我們一塊來看一下吧：

創(chuàng)新互聯(lián)建站是一家專注于成都做網(wǎng)站、成都網(wǎng)站建設(shè)、成都外貿(mào)網(wǎng)站建設(shè)和多線BGP機(jī)房的網(wǎng)絡(luò)公司，有著豐富的建站經(jīng)驗和案例。

/  滾動條的滑軌背景顏色  /

::-webkit-scrollbar-track {

background-color: #b46868;

}

/  滑塊顏色  /

::-webkit-scrollbar-thumb {

background-color: rgba(0, 0, 0, 0.2);

}

/  滑軌兩頭的監(jiān)聽按鈕顏色  /

::-webkit-scrollbar-button {

background-color: #7c2929;

}

/  橫向滾動條和縱向滾動條相交處尖角的顏色  /

::-webkit-scrollbar-corner {

background-color: black;

}

// IE 自己的設(shè)置方法，并且是第一個可以自定義滾動條的瀏覽器，從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?

網(wǎng)站欄目：好程序員教程之配置H5的滾動條樣式示例代碼
文章分享：http://sd-ha.com/article30/gegiso.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供App設(shè)計、App開發(fā)、網(wǎng)頁設(shè)計公司、品牌網(wǎng)站制作、品牌網(wǎng)站建設(shè)、

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)