一、水平居中布局與滾動條跳動的千年難題

當前web屆，絕大多數的頁面間布局都是水平居中布局，主體定個寬度，然后margin: 0 auto的節奏~

例如，大淘寶的首頁：

然而，這種布局有一個存在一個影響用戶體驗的隱患。應該都知道，現代瀏覽器滾動條默認是overflow:auto類型的，也就是如果尺寸不足一屏，沒有滾動條；超出，出現滾動條。于是，問題來了：

    信息流頁面，如新浪微博，是從上往下push渲染的。開始只有頭部一些信息加載，此時頁面高度有限，沒有滾動條；然后，更多內容顯示，滾動條出現，占據可用寬度，margin: 0 auto主體元素自然會做偏移——跳動產生。
    JS交互，本來默認頁面高度不足一屏，結果點擊了個“加載更多”，內容超過一屏，滾動條出現，頁面主體就會左側跳動。
    結構類似幾個頁面通過頭部的水平導航刷新切換，結果有的頁面有滾動條，有的沒有。造成的結果就是，導航尼瑪怎么跳來跳去！

當前優化這種體驗問題，一般有兩種解決方法：

    高度尺寸不確定的，例如，新浪微博，使用：

發表評論 共有條評論 用戶名: 密碼: 驗證碼: 匿名發表