大家寫頁面時應該都遇到過一個問題,尤其是寫單頁面應用的時候,
在有滾動條頁面和沒有滾動條頁面之間相互跳轉時,
你頁面的主體內容會向左或者向右抖一下,讓強迫症看了很不舒服。
現在就來解救一下強迫症:
方法一: 不管有沒有滾動條,都保留滾動條區域
body{overflow-y: scroll;}
方法二:CSS3計算calc和vw單位巧妙實現滾動條出現頁面不跳動(兼容IE9+以及其他現代瀏覽器)
你希望不抖動的元素{padding-left: calc(100vw - 100%);}
方法二最好別給body加padding-left: calc(100vw - 100%);因為有滾動條時,頁面最左邊也會出現空白;
所以最好單獨給頁面的主要元素加padding-left: calc(100vw - 100%);