滚动条那些事
一、滾動(dòng)條樣式
1. ie8瀏覽器
| scrollbar-arrow-color | 三角箭頭的顏色 |
| scrollbar-face-color | 立體滾動(dòng)條的顏色（包括箭頭部分的背景色） |
| scrollbar-3dlight-color | 立體滾動(dòng)條亮邊的顏色 |
| scrollbar-highlight-color | 滾動(dòng)條的高亮顏色（左陰影？） |
| scrollbar-shadow-color | 立體滾動(dòng)條陰影的顏色 |
| scrollbar-darkshadow-color | 立體滾動(dòng)條外陰影的顏色 |
| scrollbar-track-color | 立體滾動(dòng)條背景顏色 |
| scrollbar-base-color | 滾動(dòng)條的基色 |
2. 其他瀏覽器（參考-風(fēng)銘大師）
| ::-webkit-scrollbar | 滾動(dòng)條整體部分，其中的屬性: width,height,background,border等。 |
| ::-webkit-scrollbar-button | 滾動(dòng)條兩端的按鈕。可以用display:none讓其不顯示，也可以添加背景圖片，顏色改變顯示效果。 |
| ::-webkit-scrollbar-track | 外層軌道。可以用display:none讓其不顯示，也可以添加背景圖片，顏色改變顯示效果。 |
| ::-webkit-scrollbar-track-piece | 內(nèi)層軌道，具體區(qū)別看下面gif圖，需要注意的就是它會(huì)覆蓋第三個(gè)屬性的樣式。 |
| ::-webkit-scrollbar-thumb | 滾動(dòng)條里面可以拖動(dòng)的那部分。 |
| ::-webkit-scrollbar-corner | 邊角，兩個(gè)滾動(dòng)條交匯處。 |
| ::-webkit-resizer | 兩個(gè)滾動(dòng)條交匯處用于拖動(dòng)調(diào)整元素大小的小控件（基本用不上） |
二、滾動(dòng)條造成頁面抖動(dòng)
1. 造成頁面抖動(dòng)的原因：
當(dāng)布局用到margin:0 auto;左右水平居中時(shí)，且有的頁面有滾動(dòng)條，有的頁面沒有，這樣會(huì)造成抖動(dòng)。
div{width:1200px;margin:0 auto; } <body><div></div> </body>2. 解決辦法（參考1-zh_rey、 參考2-OZCNO、推薦參考3-張鑫旭 ）：
（1）一直存在滾動(dòng)槽：overflow-y:scroll;
（2）讓頁面右邊偏移滾動(dòng)條的寬度那么長： margin-left: calc(100vw - 100%); 或 padding-left: calc(100vw - 100%);
- 1、加在居中定寬主體的父級身上。
- 2、calc 是CSS3中的計(jì)算，IE10+瀏覽器支持，IE9瀏覽器基本支持(不能用在background-position上)；-
- 3、100vw 相對于瀏覽器的 window.innerWidth，是瀏覽器的內(nèi)部寬度，注意，滾動(dòng)條寬度也計(jì)算在內(nèi)！而100%是可用寬度，是不含滾動(dòng)條的寬度。 于是，calc(100vw - 100%) 就是瀏覽器滾動(dòng)條的寬度大小（如果有，如果沒有滾動(dòng)條則是0）！左右都有一個(gè)滾動(dòng)條寬度（或都是0）被占用，主體內(nèi)容就可以永遠(yuǎn)居中瀏覽器啦，從而沒有任何跳動(dòng)！
注意：ie 瀏覽器有個(gè) offset 偏移量，比較推薦使用 padding-left（能解決部分問題）。
設(shè)置 padding-left ，有時(shí)候拉動(dòng)橫向滾條條時(shí)，頁面的偏移量（這個(gè)時(shí)候是padding）還是不正確，這時(shí)需要做響應(yīng)式。
此時(shí)，原來定寬主體就不用再寫 padding-left: calc(100vw - 100%);，只需要寫上面這段響應(yīng)式就可以了。
（3）兼容寫法：
html {overflow-x: hidden;overflow-y: auto; } body {width: 100vw;overflow: hidden;padding-left: calc(100vw - 100%); }也可以看我之前寫的，不過相差不是很大：滾動(dòng)條造成頁面抖動(dòng)問題
三、滾動(dòng)條部分留白問題
造成滾動(dòng)條留白的原因是寬度設(shè)置了100%，哪里留白就把那的 width:100% 改為：min-width:100%就好了。
四、讓背景圖不跟隨滾動(dòng)條滾動(dòng)
解決辦法（參考-站住，別跑）：
（1）css：
在設(shè)置背景圖的元素中設(shè)置一條屬性： background-attachment:fixed;，兼容IE6；
（2）js：
具體效果就看原文吧！
總結(jié)
- 上一篇： ie 浏览器布局中的 offset
- 下一篇： 让element-ui的输入框聚焦的4种