CSS設(shè)計(jì)之頁面滾動(dòng)條出現(xiàn)時(shí)防止頁面跳動(dòng)的方法

1、css設(shè)計(jì)之頁面滾動(dòng)條出現(xiàn)時(shí)防止頁面跳動(dòng)的方法一、水平居中布局與滾動(dòng)條跳躍的千年難題當(dāng)前web屆，絕大多數(shù)的頁面間布局都是水平居中布局，主體定個(gè)寬度，然后margin: 0 auto的節(jié)奏例如，大淘寶的首頁：然而，這種布局有一個(gè)存在一個(gè)影響用戶體驗(yàn)的隱患。應(yīng)當(dāng)都知道，現(xiàn)代掃瞄器滾動(dòng)條默認(rèn)是overflow:auto類型的，也就是假如尺寸不足一屏，沒有滾動(dòng)條；超出，浮現(xiàn)滾動(dòng)條。于是，問題來了： 信息流頁面，如新浪微博，是從上往下push渲染的。開頭惟獨(dú)頭部一些信息加載，此時(shí)頁面高度有限，沒有滾動(dòng)條；然后，更多內(nèi)容顯示，滾動(dòng)條浮現(xiàn)，占領(lǐng)可用寬度，margin: 0 auto主體元素自然會(huì)做偏移&a

2、mp;mdash;—跳躍產(chǎn)生。 js交互，原來默認(rèn)頁面高度不足一屏，結(jié)果點(diǎn)擊了個(gè)加載更多，內(nèi)容超過一屏，滾動(dòng)條浮現(xiàn)，頁面主體就會(huì)左側(cè)跳躍。 結(jié)構(gòu)類似幾個(gè)頁面通過頭部的水平導(dǎo)航刷新切換，結(jié)果有的頁面有滾動(dòng)條，有的沒有。造成的結(jié)果就是，導(dǎo)航尼瑪怎么跳來跳去！ 當(dāng)前優(yōu)化這種體驗(yàn)問題，普通有兩種解決辦法： 高度尺寸不確定的，例如，新浪微博，用法： css code復(fù)制內(nèi)容到剪貼板 body overflow-y: scroll; 高度確定的，例如淘寶網(wǎng)首頁。用法css把頁面尺寸布局骨架搭好，再在里面吐數(shù)據(jù)。于是，要么沒有滾動(dòng)條，要么滾動(dòng)條挺直浮現(xiàn)。不會(huì)浮現(xiàn)跳躍。然而，然而，后面的策

3、略只適合一些特別的定制性很強(qiáng)的頁面。你說像知乎這樣子，高度隨內(nèi)容而定的頁面，明顯就無法駕馭；而第1種辦法overflow-y: scroll，在頁面高度較小的時(shí)候，依舊會(huì)保留一個(gè)丑陋的灰色的滾動(dòng)欄，這其實(shí)又回到了ie當(dāng)?shù)赖呐f社會(huì)時(shí)代?，F(xiàn)代掃瞄器做的那些默認(rèn)視覺優(yōu)化豈不是白費(fèi)了，想想就好痛心。二、css3計(jì)算calc和vw單位巧妙實(shí)現(xiàn)滾動(dòng)條浮現(xiàn)頁面不跳躍很容易，只要一行代碼就搞定了：css code復(fù)制內(nèi)容到剪貼板 .wrap-outer margin-left: calc(100vw - 100%); 或者：css code復(fù)制內(nèi)容到剪貼板 .wrap-outer padding-left:

4、calc(100vw - 100%); 然后就可以慶祝放鞭炮啦！首先，.wrap-outer指的是居中定寬主體的父級(jí)，假如沒有，創(chuàng)建一個(gè)（用法主體也是可以實(shí)現(xiàn)類似效果，不過本著寬度分別原則，不推舉）；然后，calc是css3中的計(jì)算，ie10+掃瞄器支持，ie9掃瞄器基本支持(不能用在background-position上)；最后，100vw相對(duì)于掃瞄器的window.innerwidth，是掃瞄器的內(nèi)部寬度，注重，滾動(dòng)條寬度也計(jì)算在內(nèi)！而100%是可用寬度，是不含滾動(dòng)條的寬度。于是，calc(100vw - 100%)就是掃瞄器滾動(dòng)條的寬度大?。偃缬?，假如沒有滾動(dòng)條則是0）！左右都有一個(gè)滾動(dòng)條寬度（或都是0）被占用，主體內(nèi)容就可以永久居中掃瞄器啦，從而沒有任何跳躍！您可以狠狠地點(diǎn)擊這里(ie10+)：頁面浮現(xiàn)滾動(dòng)條的時(shí)候沒有跳躍demodemo頁面中，標(biāo)題和下面的妹子都是居中效果。其中，妹子做了本文所述的滾動(dòng)無跳躍處理，而標(biāo)題沒有，結(jié)果，你會(huì)發(fā)覺，滾動(dòng)條浮現(xiàn)與否會(huì)讓標(biāo)題文字跳躍，但是，妹子卻女神般巋然不動(dòng)：兼容性支持：ie9+以及其他現(xiàn)代掃瞄器。窄屏幕寬度下的處理上面css還是有一點(diǎn)瑕疵的，掃瞄器寬度比較小的時(shí)候，左側(cè)留的白顯然與右邊多，說不定會(huì)顯得有點(diǎn)傻。此時(shí)，可能需要做點(diǎn)響應(yīng)式處理睬更好一點(diǎn)：css code復(fù)制內(nèi)容到剪貼板 media screen an