国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

水平居中布局與滾動(dòng)條跳動(dòng)的千年難題

techstay / 2361人閱讀

摘要：于是，問(wèn)題來(lái)了，信息流頁(yè)面，如新浪微博，是從上往下渲染的。，結(jié)構(gòu)類似幾個(gè)頁(yè)面通過(guò)頭部的水平導(dǎo)航刷新切換，結(jié)果有的頁(yè)面有滾動(dòng)條，有的沒(méi)有。

絕大多數(shù)的頁(yè)面間布局都是水平居中布局，主體定個(gè)寬度，
然后margin: 0 auto的節(jié)奏~例如，婦女之友大淘寶的首頁(yè)：

.warp{
    width:1190px;
    margin:0 auto;
    position:relative;
}

然而，這種布局有一個(gè)存在一個(gè)影響用戶體驗(yàn)的隱患。應(yīng)該都知道，現(xiàn)代瀏覽器滾動(dòng)條默認(rèn)是overflow:auto類型的，也就是如果尺寸不足一屏，沒(méi)有滾動(dòng)條；超出，出現(xiàn)滾動(dòng)條。于是，問(wèn)題來(lái)了：

1，信息流頁(yè)面，如新浪微博，是從上往下push渲染的。開(kāi)始只有頭部一些信息加載，此時(shí)頁(yè)面高度有限，沒(méi)有滾動(dòng)條；然后，更多內(nèi)容顯示，滾動(dòng)條出現(xiàn)，占據(jù)可用寬度，margin: 0 auto主體元素自然會(huì)做偏移——跳動(dòng)產(chǎn)生。
2，JS交互，本來(lái)默認(rèn)頁(yè)面高度不足一屏，結(jié)果點(diǎn)擊了個(gè)“加載更多”，內(nèi)容超過(guò)一屏，滾動(dòng)條出現(xiàn)，頁(yè)面主體就會(huì)左側(cè)跳動(dòng)。
3，結(jié)構(gòu)類似幾個(gè)頁(yè)面通過(guò)頭部的水平導(dǎo)航刷新切換，結(jié)果有的頁(yè)面有滾動(dòng)條，有的沒(méi)有。造成的結(jié)果就是，導(dǎo)航尼瑪怎么跳來(lái)跳去！

當(dāng)前優(yōu)化這種體驗(yàn)問(wèn)題，一般有兩種解決方法：

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

body { overflow-y: scroll; }

高度確定的，例如淘寶網(wǎng)首頁(yè)。使用CSS把頁(yè)面尺寸布局骨架搭好，再在里面吐數(shù)據(jù)。于是，要么沒(méi)有滾動(dòng)條，要么滾動(dòng)條直接出現(xiàn)。不會(huì)出現(xiàn)跳動(dòng)。

然而，然而，后面的策略只適合一些特殊的定制性很強(qiáng)的頁(yè)面。你說(shuō)像知乎這樣子，高度隨內(nèi)容而定的頁(yè)面，顯然就無(wú)法駕馭；而第1種方法overflow-y: scroll，在頁(yè)面高度較小的時(shí)候，依然會(huì)保留一個(gè)丑陋的灰色的滾動(dòng)欄，這其實(shí)又回到了IE當(dāng)?shù)赖呐f社會(huì)時(shí)代。現(xiàn)代瀏覽器做的那些默認(rèn)視覺(jué)優(yōu)化豈不是白費(fèi)了，想想就好痛心。

大師，難道就沒(méi)有一了百了、兩全其美、三生有幸的方法了嗎？
阿彌陀佛，騷年，請(qǐng)看我手中的這盞燈……

CSS3計(jì)算calc和vw單位巧妙實(shí)現(xiàn)滾動(dòng)條出現(xiàn)頁(yè)面不跳動(dòng)
很簡(jiǎn)單，只要一行代碼就搞定了：

.wrap-outer {
    margin-left: calc(100vw - 100%);
}

或者：

.wrap-outer {
    padding-left: calc(100vw - 100%);
}

然后就可以慶祝放鞭炮啦！

首先，.wrap-outer指的是居中定寬主體的父級(jí)，如果沒(méi)有，創(chuàng)建一個(gè)（使用主體也是可以實(shí)現(xiàn)類似效果，不過(guò)本著寬度分離原則，不推薦）；
然后，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)條的寬度大?。ㄈ绻?，如果沒(méi)有滾動(dòng)條則是0）！左右都有一個(gè)滾動(dòng)條寬度（或都是0）被占用，主體內(nèi)容就可以永遠(yuǎn)居中瀏覽器啦，從而沒(méi)有任何跳動(dòng)！

您可以狠狠地點(diǎn)擊這里(IE10+)：頁(yè)面出現(xiàn)滾動(dòng)條的時(shí)候沒(méi)有跳動(dòng)demo

demo頁(yè)面中，標(biāo)題和下面的妹子都是居中效果。其中，妹子做了本文所述的“滾動(dòng)無(wú)跳動(dòng)”處理，而標(biāo)題沒(méi)有，結(jié)果，你會(huì)發(fā)現(xiàn)，滾動(dòng)條出現(xiàn)與否會(huì)讓標(biāo)題文字跳動(dòng)，但是，妹子卻女神般巋然不動(dòng)：

兼容性
支持：IE9+以及其他現(xiàn)代瀏覽器。

窄屏幕寬度下的處理
上面CSS還是有一點(diǎn)瑕疵的，瀏覽器寬度比較小的時(shí)候，左側(cè)留的白明顯與右邊多，說(shuō)不定會(huì)顯得有點(diǎn)傻。此時(shí)，可能需要做點(diǎn)響應(yīng)式處理會(huì)更好一點(diǎn)：

@media screen and (min-width: 1150px) {
   .wrap-outer {
       margin-left: calc(100vw - 100%);
   }
}

更新于2016年9月28日
經(jīng)過(guò)一些列項(xiàng)目實(shí)踐，關(guān)于瀏覽器出現(xiàn)滾動(dòng)條和消失頁(yè)面不滾動(dòng)有了更加終極的解決方案，經(jīng)過(guò)大型項(xiàng)目實(shí)踐已經(jīng)驗(yàn)證相當(dāng)具有可行性，這里特意分享下：

html {
  overflow-y: scroll;
}

:root {
  overflow-y: auto;
  overflow-x: hidden;
}

:root body {
  position: absolute;
}

body {
  width: 100vw;
  overflow: hidden;
}

難道，你就不想點(diǎn)個(gè)贊再走。
吃了我的辣條，你還想跑，站住，別跑！
文章出處請(qǐng)點(diǎn)點(diǎn)點(diǎn)

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/96236.html

相關(guān)文章

  • 水平居中布局與滾動(dòng)條跳動(dòng)的千年難題

    摘要：于是，問(wèn)題來(lái)了，信息流頁(yè)面，如新浪微博，是從上往下渲染的。，結(jié)構(gòu)類似幾個(gè)頁(yè)面通過(guò)頭部的水平導(dǎo)航刷新切換，結(jié)果有的頁(yè)面有滾動(dòng)條，有的沒(méi)有。 絕大多數(shù)的頁(yè)面間布局都是水平居中布局，主體定個(gè)寬度，然后margin: 0 auto的節(jié)奏~例如，婦女之友大淘寶的首頁(yè)： .warp{ width:1190px; margin:0 auto; position:relativ...

    songjz 評(píng)論0 收藏0

  • 水平居中布局與滾動(dòng)條跳動(dòng)的千年難題

    摘要：于是，問(wèn)題來(lái)了，信息流頁(yè)面，如新浪微博，是從上往下渲染的。，結(jié)構(gòu)類似幾個(gè)頁(yè)面通過(guò)頭部的水平導(dǎo)航刷新切換，結(jié)果有的頁(yè)面有滾動(dòng)條，有的沒(méi)有。 絕大多數(shù)的頁(yè)面間布局都是水平居中布局，主體定個(gè)寬度，然后margin: 0 auto的節(jié)奏~例如，婦女之友大淘寶的首頁(yè)： .warp{ width:1190px; margin:0 auto; position:relativ...

    mo0n1andin 評(píng)論0 收藏0

  • 水平居中布局與滾動(dòng)條跳動(dòng)的千年難題

    摘要：于是，問(wèn)題來(lái)了，信息流頁(yè)面，如新浪微博，是從上往下渲染的。，結(jié)構(gòu)類似幾個(gè)頁(yè)面通過(guò)頭部的水平導(dǎo)航刷新切換，結(jié)果有的頁(yè)面有滾動(dòng)條，有的沒(méi)有。 絕大多數(shù)的頁(yè)面間布局都是水平居中布局，主體定個(gè)寬度，然后margin: 0 auto的節(jié)奏~例如，婦女之友大淘寶的首頁(yè)： .warp{ width:1190px; margin:0 auto; position:relativ...

    mist14 評(píng)論0 收藏0

  • 可視化效果(Visual effects)

    摘要：一般地，一個(gè)塊盒的內(nèi)容都被限制在該盒的邊內(nèi)。這種盒并不一定會(huì)根據(jù)其祖先的屬性裁剪。默認(rèn)情況下，元素不會(huì)被裁剪。在閉合路徑內(nèi)的內(nèi)容會(huì)顯示，而路徑外邊的都會(huì)被剪掉著作權(quán)歸作者所有。 Overflow and clipping 一般地，一個(gè)塊盒的內(nèi)容都被限制在該盒的content邊內(nèi)。某些情況下，一個(gè)盒可能會(huì)溢出，意味著它的部分內(nèi)容或者全部?jī)?nèi)容位于該盒外部，例如： 一行無(wú)法拆分，導(dǎo)致行盒比...

    JowayYoung 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<