好程式設計師教程之配置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?
來自 “ ITPUB部落格 ” ,連結:http://blog.itpub.net/69913892/viewspace-2639103/,如需轉載,請註明出處,否則將追究法律責任。
相關文章
- 捲軸樣式
- ProTable修改捲軸樣式
- 好程式設計師Python培訓分享函式返回值的示例程式碼詳解程式設計師Python函式
- CefSharp自定義捲軸樣式
- 好程式設計師不寫程式碼程式設計師
- 影片直播原始碼,CSS 修改捲軸樣式、信封邊框樣式原始碼CSS
- 好程式設計師Python培訓分享函式的定義與使用示例程式設計師Python函式
- 好程式設計師web前端教程之Node.Js流程程式設計師Web前端Node.js
- 直播平臺原始碼,CSS 修改捲軸樣式、信封邊框樣式原始碼CSS
- 自定義瀏覽器捲軸樣式瀏覽器
- 什麼樣的社群是好的程式設計師社群?程式設計師
- 好程式設計師web前端學習教程之Node Js流程程式設計師Web前端JS
- 好程式設計師前端教程之JavaScript閉包和匿名函式的關係詳解程式設計師前端JavaScript函式
- 好程式設計師web前端教程分享3種方法實現CSS隱藏捲軸並可以滾動內容程式設計師Web前端CSS
- 好程式設計師前端教程之HTML5中的storage 如何使用?程式設計師前端HTML
- 好程式設計師:Java程式設計師面試秘籍程式設計師Java面試
- 好程式設計師web前端教程之詳解JavaScript嚴格模式程式設計師Web前端JavaScript模式
- 好程式設計師Java教程之ZooKeeper面試題梳理彙總程式設計師Java面試題
- 好程式設計師學習筆記:函式程式設計師筆記函式
- 好程式設計師web前端教程:Math函式程式設計師Web前端函式
- 不懂產品的碼農不是好程式設計師程式設計師
- 好程式設計師Java培訓分享Java函式式編碼結構程式設計師Java函式
- 好程式設計師寫出來的程式碼,就叫好程式碼嗎?你錯了!程式設計師
- 好程式設計師web前端培訓分享怎樣學好css?程式設計師Web前端CSS
- 不會填坑的程式設計師不是一個好程式設計師!程式設計師
- 好程式設計師web前端分享H5高階工程師學習思路程式設計師Web前端H5工程師
- 好程式設計師web前端教程之JS繼承實現方式解析程式設計師Web前端JS繼承
- 好程式設計師Java教程之Java面試寶典Java IO篇程式設計師Java面試
- 好程式設計師web前端教程之前端模組化開發程式設計師Web前端
- 程式設計師的計算機配置程式設計師計算機
- 好程式設計師Java分享Spring框架之AOP的基本配置程式設計師JavaSpring框架
- 好程式設計師web前端分享css初始化程式碼程式設計師Web前端CSS
- 好程式設計師大資料教學點睛:Hadoop基礎篇程式設計師大資料Hadoop
- 《程式碼大全》程式設計師們怎樣花費自己的時間程式設計師
- 好程式設計師分享迴圈內的回撥函式程式設計師函式
- 好程式設計師web前端分享應該怎樣學好web前端?程式設計師Web前端
- 程式設計師反捲指南 - 打工人也需要生活程式設計師
- AUTOCAD——捲軸設定