css頁面滾動條出現時防止頁面跳動的方法


大家寫頁面時應該都遇到過一個問題,尤其是寫單頁面應用的時候,

有滾動條頁面沒有滾動條頁面之間相互跳轉時,

你頁面的主體內容會向左或者向右抖一下,讓強迫症看了很不舒服。

現在就來解救一下強迫症:

方法一: 不管有沒有滾動條,都保留滾動條區域

body{overflow-y: scroll;}  

方法二:CSS3計算calc和vw單位巧妙實現滾動條出現頁面不跳動(兼容IE9+以及其他現代瀏覽器)

你希望不抖動的元素{padding-left: calc(100vw - 100%);}

方法二最好別給body加padding-left: calc(100vw - 100%);因為有滾動條時,頁面最左邊也會出現空白;

所以最好單獨給頁面的主要元素加padding-left: calc(100vw - 100%);

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM