1. 程式人生 > >CSS vw讓overflow:auto頁面滾動條出現時不跳動

CSS vw讓overflow:auto頁面滾動條出現時不跳動

最開始的需求是出現一個彈出框,彈出框下面部分不會滾動,但是發現一個問題,就是不滾動和可以滾動的區別是滾動條,而滾動條佔據了寬度,設定100%就會使內容各種跳,一開始用了各種方法,js用過,但是不好,雖然我是點選事件,但是能用css解決的就不用js。後來用了各種絕對定位蓋住滾動條啊,calc蓋住滾動條啊,都不完美,總是有新的問題出現,然後就發現了一個大神的空間有一個完美解決此問題的方法,然後試過之後真的完美解決,下面是程式碼和大神空間的連結

html {
  overflow-y: scroll;
}

:root {
  overflow-y: auto;
  overflow-x: hidden;
}

:root body {
  position: absolute;
}

body {
  width: 100vw;
  overflow: hidden;
}
http://www.zhangxinxu.com/wordpress/2015/01/css-page-scrollbar-toggle-center-no-jumping/#comment