CSS頁面滾動條出現時怎么防止頁面跳動

本篇內容介紹了“CSS頁面滾動條出現時怎么防止頁面跳動”的有關知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領大家學習一下如何處理這些情況吧！希望大家仔細閱讀，能夠學有所成！

CSS3計算calc和vw單位巧妙實現滾動條出現頁面不跳動

很簡單，只要一行代碼就搞定了：

CSS Code復制內容到剪貼板

.wrap-outer {  

    margin-left: calc(100vw - 100%);  

} 

或者：

CSS Code復制內容到剪貼板

.wrap-outer {  

    padding-left: calc(100vw - 100%);  

} 

然后就可以慶祝放鞭炮啦??！

首先，.wrap-outer指的是居中定寬主體的父級，如果沒有，創建一個（使用主體也是可以實現類似效果，不過本著寬度分離原則，不推薦）；

然后，calc是CSS3中的計算，IE10+瀏覽器支持，IE9瀏覽器基本支持(不能用在background-position上)；

最后，100vw相對于瀏覽器的window.innerWidth，是瀏覽器的內部寬度，注意，滾動條寬度也計算在內！而100%是可用寬度，是不含滾動條的寬度。

于是，calc(100vw - 100%)就是瀏覽器滾動條的寬度大?。ㄈ绻?，如果沒有滾動條則是0）！左右都有一個滾動條寬度（或都是0）被占用，主體內容就可以永遠居中瀏覽器啦，從而沒有任何跳動！

您可以狠狠地點擊這里(IE10+)：頁面出現滾動條的時候沒有跳動demo

demo頁面中，標題和下面的妹子都是居中效果。其中，妹子做了本文所述的“滾動無跳動”處理，而標題沒有，結果，你會發現，滾動條出現與否會讓標題文字跳動，但是，妹子卻女神般巋然不動：

兼容性

支持：IE9+以及其他現代瀏覽器。

窄屏幕寬度下的處理

上面CSS還是有一點瑕疵的，瀏覽器寬度比較小的時候，左側留的白明顯與右邊多，說不定會顯得有點傻。此時，可能需要做點響應式處理會更好一點：

CSS Code復制內容到剪貼板

@media screen and (min-width: 1150px) {  

   .wrap-outer {  

       margin-left: calc(100vw - 100%);  

   }  

} 

“CSS頁面滾動條出現時怎么防止頁面跳動”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識可以關注億速云網站，小編將為大家輸出更多高質量的實用文章！