谷歌瀏覽器
谷歌可設定大部分滾動條樣式，但是無法設定內嵌式滾動條，如下圖：
/*滾動條整體部分，其中的屬性有width,height,background,border等（就和乙個塊級元素一樣）（位置1）
width指豎向滾動條寬度 height指橫向滾動條高度
*/::-webkit-scrollbar
/*滾動條兩端的按鈕，可以用display:none讓其不顯示，也可以新增背景，顏色改變顯示效果（位置2）*/
::-webkit-scrollbar-button
/*外層軌道，可以用display:none讓其不顯示，也可以新增背景，顏色改變顯示效果（位置3）*/
::-webkit-scrollbar-track
/*內層軌道，滾動條中間部分（位置4）*/
::-webkit-scrollbar-track-piece
/*滾動條裡面可以拖動的那部分（位置5）*/
::-webkit-scrollbar-thumb
/*邊角（位置6）*/
::-webkit-scrollbar-corner
/*定義右下角拖動塊的樣式（位置7）*/
::-webkit-scrollbar-resizer
ie瀏覽器
ie僅能設定與顏色相關的滾動條樣式
scrollbar-arrow-color: #f4ae21; /**//*三角箭頭的顏色*/
scrollbar-face-color: #ff2ed7; /**//*立體滾動條的顏色*/
scrollbar-3dlight-color: #2fff1b; /**//*立體滾動條亮邊的顏色*/
scrollbar-highlight-color: #d40000; /**//*滾動條空白部分的顏色*/
scrollbar-shadow-color: #2cfffd; /**//*立體滾動條陰影的顏色*/
scrollbar-darkshadow-color: #1a1aff; /**//*立體滾動條強陰影的顏色*/
scrollbar-track-color: #666; /**//*立體滾動條背景顏色*/
scrollbar-base-color: #ff4857; /**//*滾動條的基本顏色*/
其他瀏覽器
大多不支援大部分滾動條屬性
文章參考
相容火狐瀏覽器滾動條樣式
首先需要引入jquery和jquery.nicescrollnpm install jquery npm install jquery.nicescroll以下為jquery.nicescroll官網 在元件中使用 box div div template import from jquery im...
瀏覽器滾動條
做 時發現登入成功後瀏覽器滾動條消失無法滾動頁面 通過觀察和除錯，發現是強制隱藏了bootstrap的模態框後，body的overflow變為了hidden，同時也多了乙個17px的右內邊距，無法呼叫出垂直滾動條，解決方案 隱藏模態框的同時設定body的overflow為scroll，同時取消右內邊...
iframe滾動條充當瀏覽器滾動條
在做部落格專案的時候，使用了iframe，方便根據選擇的文章類別切換顯示的內容，但是文章一般都有很多，通過bootstrap的 列表的方式顯示的話，iframe是一定會出現滾動條的，特別是我新增了乙個 滾動條觸底之後動態載入更多的文章 的功能。這樣頁面上就會有兩個滾動條，特別奇怪。在網上學習了一些之...