vw讓overflow:auto頁面滾動條出現時不跳動
一、水平居中佈局與滾動條跳動的千年難題
當前web屆,絕大多數的頁面間佈局都是水平居中佈局,主體定個寬度,然後margin: 0 auto
的節奏~
例如,婦女之友大淘寶的首頁:
然而,這種佈局有一個存在一個影響使用者體驗的隱患。應該都知道,現代瀏覽器滾動條預設是overflow:auto
型別的,也就是如果尺寸不足一屏,沒有滾動條;超出,出現滾動條。於是,問題來了:
- 資訊流頁面,如新浪微博,是從上往下push渲染的。開始只有頭部一些資訊載入,此時頁面高度有限,沒有滾動條;然後,更多內容顯示,滾動條出現,佔據可用寬度,
margin: 0 auto
主體元素自然會做偏移——跳動產生。 - JS互動,本來預設頁面高度不足一屏,結果點選了個“載入更多”,內容超過一屏,滾動條出現,頁面主體就會左側跳動。
- 結構類似幾個頁面通過頭部的水平導航重新整理切換,結果有的頁面有滾動條,有的沒有。造成的結果就是,導航尼瑪怎麼跳來跳去!
當前優化這種體驗問題,一般有兩種解決方法:
- 高度尺寸不確定的,例如,新浪微博,使用:
body { overflow-y: scroll; }
- 高度確定的,例如淘寶網首頁。使用CSS把頁面尺寸佈局骨架搭好,再在裡面吐資料。於是,要麼沒有滾動條,要麼滾動條直接出現。不會出現跳動。
然而,然而,後面的策略只適合一些特殊的定製性很強的頁面。你說像知乎這樣子,高度隨內容而定的頁面,顯然就無法駕馭;而第1種方法overflow-y: scroll
,在頁面高度較小的時候,依然會保留一個醜陋的灰色的滾動欄,這其實又回到了IE當道的舊社會時代。現代瀏覽器做的那些預設視覺優化豈不是白費了,想想就好痛心。
大師,難道就沒有一了百了、兩全其美、三生有幸的方法了嗎?
阿彌陀佛,騷年,請看我手中的這盞燈……
二、CSS3計算calc和vw單位巧妙實現滾動條出現頁面不跳動
很簡單,只要一行程式碼就搞定了:
.wrap-outer { margin-left: calc(100vw - 100%); }
或者:
.wrap-outer { padding-left: calc(100vw - 100%); }
然後就可以慶祝放鞭炮啦!!
首先,.wrap-outer
指的是居中定寬主體的父級,如果沒有,建立一個(使用主體也是可以實現類似效果,不過本著寬度分離原則,不推薦);
然後,calc
background-position
上);最後,
100vw
相對於瀏覽器的window.innerWidth
,是瀏覽器的內部寬度,注意,滾動條寬度也計算在內!而100%
是可用寬度,是不含滾動條的寬度。於是,
calc(100vw - 100%)
就是瀏覽器滾動條的寬度大小(如果有,如果沒有滾動條則是0
)!左右都有一個滾動條寬度(或都是0
)被佔用,主體內容就可以永遠居中瀏覽器啦,從而沒有任何跳動!
demo頁面中,標題和下面的妹子都是居中效果。其中,妹子做了本文所述的“滾動無跳動”處理,而標題沒有,結果,你會發現,滾動條出現與否會讓標題文字跳動,但是,妹子卻女神般巋然不動:
相容性
支援:IE9+以及其他現代瀏覽器。
窄螢幕寬度下的處理
上面CSS還是有一點瑕疵的,瀏覽器寬度比較小的時候,左側留的白明顯與右邊多,說不定會顯得有點傻。此時,可能需要做點響應式處理會更好一點:
@media screen and (min-width: 1150px) { .wrap-outer { margin-left: calc(100vw - 100%); } }
更新於2016年9月28日
經過一些列專案實踐,關於瀏覽器出現滾動條和消失頁面不滾動有了更加終極的解決方案,經過大型專案實踐已經驗證相當具有可行性,這裡特意分享下:
html { overflow-y: scroll; } :root { overflow-y: auto; overflow-x: hidden; } :root body { position: absolute; } body { width: 100vw; overflow: hidden; }
大家隨意取走,不用謝!
三、結束語
說點八卦吧,本文原作者名叫Ayke van Laëthem, 才開始寫部落格,就是因為寫了這篇文章,搞掉了他1G的頻寬流量,文章至少訪問了15,000次,著實被嚇著了,還是蠻搞的!哈哈!
如果你也有精彩創意且使用的前端tips, 不妨也拿出來共享下,會有很多意外的收穫與成長的。