問題描述：當頁面突然出現滾動條的時候，頁面會突然被擠壓，因為滾動條也是需要占位的呀。
解決思路：現在目標就是滾動條出現，但是內容位置不變，依然不動。
* { margin: 0; padding: 0; } html { overflow-y: overlay; } .container { height: 200px; padding: 17px; background-color: #00b83f; text-align: right; } <div class="container"> <h1>我是容器內容</h1> </div>
1、新屬性overlay
chrome下overflow有個新的屬性值overlay，這個屬性簡直就是為了這個問題而生，他和auto有點像，但是區別就是在觸發滾動條時候並不擠壓空間。但是非常遺憾，這個屬性值目前只有chrome支持。
html { overflow-y: overlay; }
2、margin-right: calc(100% - 100vw)
100vw相對於瀏覽器的window.innerWidth，是瀏覽器的內部寬度，注意，滾動條寬度也計算在內！而100%是可用寬度，是不含滾動條的寬度。沒有滾動條的時候，相當於margin-right:0，沒什么影響；有滾動條的時候就相當於margin-right:-17px（17px就是滾動條的寬度啦），被滾動條占據了17px后，內容再重新往右延伸了17px，效果如同overflow:overlay，很完美，並且兼容性還不錯，起碼高版本的ie和ff都沒問題了。
* {
margin: 0;
padding: 0;
}
html {
overflow-y: auto;
overflow-x: hidden;
}
.container {
height: 2000px;
margin-right: calc(100% - 100vw);
padding: 17px;
background-color: #00b83f;
text-align: right;
}
3、絕對定位--來自張鑫旭大佬
:root選擇器：對於 HTML 來說，:root 表示 <html> 元素，除了優先級更高之外，與 html 選擇器相同。
html { overflow-y: scroll; //這是為了兼容ie8，不支持:root, vw } :root { overflow-y: auto; overflow-x: hidden; } :root body { position: absolute; } body { width: 100vw; overflow: hidden; }
記錄一下，厚積薄發，一飛沖天。