問題描述：當頁面突然出現滾動條的時候，頁面會突然被擠壓，因為滾動條也是需要佔位的呀。
解決思路：現在目標就是滾動條出現，但是內容位置不變，依然不動。
*html
.container
<
div
class
="container"
>
<
h1>我是容器內容
h1>
div>
1、新屬性overlay
chrome下overflow有個新的屬性值overlay，這個屬性簡直就是為了這個問題而生，他和auto有點像，但是區別就是在觸發滾動條時候並不擠壓空間。但是非常遺憾，這個屬性值目前只有chrome支援。
html
2、margin-right: calc(100% - 100vw)
100vw相對於瀏覽器的window.innerwidth，是瀏覽器的內部寬度，注意，滾動條寬度也計算在內！而100%是可用寬度，是不含滾動條的寬度。沒有滾動條的時候，相當於margin-right:0，沒什麼影響；有滾動條的時候就相當於margin-right:-17px（17px就是滾動條的寬度啦），被滾動條佔據了17px後，內容再重新往右延伸了17px，效果如同overflow:overlay，很完美，並且相容性還不錯，起碼高版本的ie和ff都沒問題了。
*html
.container
3、絕對定位--來自張鑫旭大佬
:root選擇器：對於 html 來說，:root表示 元素，除了優先順序更高之外，與html選擇器相同。
html :root :root body body
記錄一下，厚積薄發，一飛沖天。
讓頁面出現滾動條的時候，滾動條不影響頁面寬度
設定body的寬度為window的寬度 以下指令碼控制 body css width window width 同時設定body的overflow 樣式裡寫 bodyps 同理，div裡面的table也是這樣處理 設定tablecontainer 樣式裡寫 tablemain 指令碼控制 的寬度等於...
頁面寬高 滾動條相關JS
取視窗滾動條距離文件頂部高度 function getinfo 取視窗滾動條距離文件頂部高度 function getscrolltop else if document.body return scrolltop 取視窗滾動條本身的寬度 function getscrollwidth 判斷乙個容器...
頁面滾動條出現頁面不跳動
閱讀完 後，對產生的問題進行解決。首先，vw，是乙個相對於視口的寬度的單位，乙個視口被均分為100單位的vw，也就是說視口寬度 100vw。其次，root 的解釋 root選擇器用於選擇文件的根元素。根元素指的是位於文件樹中最頂層結構的元素。在html中，根元素永遠是html。但實際運用的時候，ro...