總結： 若用到 margin:0 auto; 使頁面居中，若部分頁面出現滾動條，滾動條默認有 20px，這樣會造成頁面抖動；

解決辦法：參考
1. html{overflow:scoll;} 讓頁面一直顯示滾動條。
overflow 的幾個屬性值：

2. padding-left: calc(100vw - 100%); 自動計算滾動條的寬度，并讓主體左邊距離頁面該（滾動條的）寬度。

比如：我想讓畫紅框部分不受滾動條影響，那么此時我就給這一部分添加這條樣式。還可以寫成： margin-left: calc(100vw - 100%);
當瀏覽器寬度比較小的時候，左側留的白明顯與右邊多，此時，做點響應式處理會更好一點：

@media screen and (min-width: 1150px) {.wrap-outer {margin-left: calc(100vw - 100%);} }

需要注意的是，此時主體不需要再寫 calc(100vw - 100%)。

3. 其他

html {overflow-y: scroll; }:root {overflow-y: auto;overflow-x: hidden; }:root body {position: absolute; }body {width: 100vw;overflow: hidden; }

滾動條的樣式設置

主要針對于 Google 瀏覽器

::-webkit-scrollbar 滾動條整體部分

::-webkit-scrollbar-thumb 滾動條里面的小方塊，能向上向下移動（或向左向右移動）

::-webkit-scrollbar-track 滾動條的軌道（里面裝有Thumb）

::-webkit-scrollbar-button 滾動條的軌道的兩端按鈕，由于通過點擊微調小方塊的位置。

::-webkit-scrollbar-track-piece 內層軌道，滾動條中間部分

::-webkit-scrollbar-corner 邊角，即垂直滾動條和水平滾動條相交的地方

::-webkit-resizer 兩個滾動條的交匯處上用于拖動調整元素大小的小控件

/* 滾動條的寬度 */ #app::-webkit-scrollbar{width:4px; } /* 滾動的滑塊 */ #app::-webkit-scrollbar-thumb{border-radius: 10px;-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);background: rgba(0,0,0,0.2); } /* 外層軌道 */ #app::-webkit-scrollbar-track {-webkit-box-shadow:inset 0 0 5px rgba(0,0,0,0.2);border-radius: 0;background: rgba(0,0,0,0.1); }

兼容 ie

#app{scrollbar-face-color: #1f7ebe; /*滾動條凸出部分的顏色*/scrollbar-highlight-color: #1f7ebe; /*滾動條空白部分的顏色*/scrollbar-shadow-color: #1f7ebe; /*立體滾動條陰影的顏色*/scrollbar-3dlight-color: #1f7ebe; /*滾動條亮邊的([www.111cn.net](http://www.111cn.net/))顏色*/scrollbar-arrow-color: #1f7ebe; /*上下按鈕上三角箭頭的顏色*/scrollbar-track-color: #c1e2f1; /*滾動條的背景顏色*/scrollbar-darkshadow-color: #1f7ebe; /*滾動條強陰影的顏色*/scrollbar-base-color: #1f7ebe; /*滾動條的基本顏色*/ }

總結

以上是生活随笔為你收集整理的滚动条造成页面抖动问题的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。