淺議(yì)網站(zhàn)內(nèi)滾動布局的(de)概念與實現(xiàn)方法 §‍>

發布日(rì)期：2015-06-26

來(lái)源：admin

浏覽量：5025

字體(tǐ)：【大(dà) 中小(xiǎo) 】

一(yī)、什(shén)麽是(shì)內(nèiΩ♦')滾動布局？

所謂“內(nèi)滾動布局”，顧名思義就(jiù)是(shì)主滾動條在頁面內(nèi≈ ¶£)部的(de)布局，是(shì)相(xiàng)對(duì↕♣)于傳統的(de)<html>滾動而言的(de)，¥®≤例如(rú)，下(xià)圖所示滾動條，是( ∑©shì)從(cóng)頭部下(xià)方開(kāi)始：

淺議(yì)內(nèi)滾動布局

傳統的(de)頁面滾動，基本上(shàng)是(shì)相(xiàng)對(duì)Ω→于整個(gè)浏覽器(qì)窗(chuāng)體(tǐ)♥₹，例如(rú)，QQ視(shì)頻(pín)首頁：

淺議(yì)內(nèi)滾動布局

二、為(wèi)什(shén)麽會(huì)有(y•λΩ∏ǒu)內(nèi)滾動布局？

随著(zhe)顯示器(qì)設備越大(dà)越寬越密，以®λ及現(xiàn)代web技(jì)術(shù)的(de)發展。web站(zhàn)點♥¶已經開(kāi)始有(yǒu)了(le)從(cóng)傳統的(de)瀑布式網頁向類桌面軟件(jià∞£γ≤n)風(fēng)格站(zhàn)點轉變的(de)趨勢。比方說(shuō)，QQ∞γ¶音(yīn)樂(yuè)的(de)首頁目前是(shì)這(" β∏zhè)樣子(zǐ)的(de)：

淺議(yì)內(nèi)滾動布局

以後可(kě)能(néng)就(jiù)會(huì☆β )變成這(zhè)樣子(zǐ)：

淺議(yì)內(nèi)滾動布局

內(nèi)蒙古網站(zhàn)制(zhì)作(zuò)¥↑&Ω，內(nèi)蒙古網站(zhàn)設計(jì)，內(nèi)蒙古網站(zhàn)建設，呼和(‌₽₽hé)浩特網站(zhàn)建設，呼和(h>≠é)浩特網站(zhàn)制(zhì)作(zuò)、呼和(hé)浩特網"↕‍站(zhàn)設計(jì)首選內(nèi)蒙古呼和(hé)浩特先誠©₩網絡科(kē)技(jì)公司。先誠官網：/

“納尼，這(zhè)不(bù)就(jiùγ>♣€)是(shì)現(xiàn)在的(de)QQ音(yīn)樂(yuè Ω♦☆)軟件(jiàn)界面截圖？”“這(zhè)位同學眼神很(hěn)犀利，沒錯(cu±$ò)，這(zhè)就(jiù)是(shì)有(yǒu)著(zhe)全國(guó)最大‌∑≥™(dà)的(de)正版高(gāo)質量樂(yuè)庫的(de)QQ音(yīn)樂‌↔≥↓(yuè)PC版截圖”。

我們可(kě)以局部放(fàng)大(dà♠±σφ)，會(huì)發現(xiàn)，是(sh ÷'∑ì)個(gè)實打實的(de)內(nèi)滾動布局。

淺議(yì)內(nèi)滾動布局

不(bù)僅是(shì)QQ音(yīn)樂(yuè)，其他(tā)很(hěnα€£)多(duō)桌面軟件(jiàn)都(dōu)是(shì)這(zhè)種內(nèi)滾動布÷$局，比方說(shuō)QQ軟件(jiàn)管↓✘™家(jiā)等等。

淺議(yì)內(nèi)滾動布局

有(yǒu)此可(kě)見(jiàn)，一(yī)旦強交λ® §互的(de)傳統web頁面桌面軟件(jià★÷£n)化(huà)，內(nèi)滾動布局是(shì)繞不(bù)開(kāi)的$ &(de)一(yī)堵牆，了(le)解之還(hái)>±是(shì)很(hěn)有(yǒu)必要(yào)的(de)。

三、如(rú)何實現(xiàn)內(nèi)滾動布局？

既然是(shì)內(nèi)滾動，就(jiù)有±∏₩Ω(yǒu)必要(yào)幹掉浏覽器(qì)原生(shēng)<html>的♣♠(de)滾動條，這(zhè)個(gè)很(hěn)簡單：

html { overflow: hidden; }

“然後呢(ne)？”我想了(le)想，好(hǎo)ε 像然後就(jiù)沒有(yǒu)“然後”了(le)，讓一(yī)個(gè)d÷ ₽iv容器(qì)滾動就(jiù)完事(shì)了(le)。

然而，事(shì)非經過不(bù)知(zhī)難，原理(lǐ)雖然簡♠&✔單沒說(shuō)頭，但(dàn)是(shì)細節操作(zuò)還(hái)是∑'₹(shì)有(yǒu)些(xiē)上(shàng↑♦↔←)手成本的(de)。

為(wèi)了(le)更好(hǎo)理(lǐ)解，γ≤±α我們拿(ná)實例說(shuō)話(hu♠ à)。最近(jìn)半年(nián)一(yī)直在參與企業(yè)QQ賬戶中心改版的(de)項∑♥₹♠目，你(nǐ)可(kě)以看(kàn)成是(shì)企✘↑業(yè)後台管理(lǐ)系統。這(zhè)裡(lǐ)有(yǒ¶α₩Ωu)幾個(gè)關鍵字，一(yī)是(shì)企業(yè)，二是(sh↑εì)管理(lǐ)系統。

1. 企業(yè)

這(zhè)裡(lǐ)為(wèi)什(shén)麽要(yào)強調是(shì)“企業≤↕(yè)”呢(ne)？因為(wèi)企業(yè)産品的(de)Ω♠用(yòng)戶一(yī)般都(dōu)是(shì)購(gòu)買了(le)企業(yè)QQ₩≥φ≤産品的(de)企業(yè)的(de)員(yuán)工(gōng)♦₹↕λ，有(yǒu)一(yī)定IT技(jì)能(néng)的(de)人(rén)。因此，用(yòng ∞<)戶的(de)浏覽器(qì)的(de)現(xi•↓Ωàn)代感就(jiù)比Qzone用(yòng)戶強不(b£απù)少(shǎo)。下(xià)圖為(wèi)同事(shì)在2015-05-20 ✔<這(zhè)個(gè)愛(ài)意滿滿的(de)日(rì)子(zǐ)拉的(de)u>δ¶serAgent數(shù)據：

淺議(yì)內(nèi)滾動布局

如(rú)果我們将支持CSS3 animati©on的(de)浏覽器(qì)稱之為(wèi)現(xiàn)代浏覽器(qì)，可(kě)₽>以發現(xiàn)，企業(yè)産品的(de)用(yòng)戶，70%~80%的(de)用(yò≠↔ng)戶都(dōu)是(shì)使用(yòng)的(de→♣)現(xiàn)代浏覽器(qì)。親們，近(jìnβ↕)8成的(de)用(yòng)戶都(dōu)是(shì)使用(yòng)現(xiàn)代浏覽器≈±ε (qì)，這(zhè)就(jiù)意味著(zhe)，企業(yè)産品其實可(kě)以作(λ✔zuò)為(wèi)現(xiàn)代web技(jì)術(shù)的(de)>'試驗田，在為(wèi)用(yòng)戶提供更好(hǎo)體(tǐ)驗更高(¥∏gāo)質量産品的(de)同時(shí)，為(wèi)日(rì)後其他(tā)↓★←産品的(de)現(xiàn)代化(huà)改造提供了(le)寶貴的(de)借¥₽≠₽鑒經驗。而本文(wén)的(de)內(nèi)滾動布局，就(jiù)是(shì)萬千經₩→±↕驗中的(de)一(yī)小(xiǎo)個(gè)。

2. 管理(lǐ)系統

“管理(lǐ)系統”意味著(zhe)站(zhàn)點以強交互為(wèi)主，會(π∏huì)有(yǒu)很(hěn)多(duō)類似辦公軟件(jiàn)的(de)交互操作(zuλ↕ò)在裡(lǐ)面。如(rú)果是(shì)更偏重浏覽 ±←的(de)站(zhàn)點，例如(rú)企業(yè)QQ官網，顯然，傳統的(≈€>de)垂直瀑布式的(de)網站(zhàn)是(shì)更适合的(de)，滾動浏覽，再滾動，再浏覽。✔↓但(dàn)是(shì)，企業(yè)管理(lǐ)系統如(rú)¥δ♦✔此龐大(dà)，操作(zuò)如(rú)此頻(pí→₹'n)繁，交互如(rú)此之多(duō)，傳統的(de)∏φπε上(shàng)下(xià)式網站(zhàn)顯然很(hěn)難讓用(yòng)戶♠≤β 用(yòng)得(de)非常得(de)心應 ₩★‌手。下(xià)圖為(wèi)以前企業(yè)QQ賬戶中心組織₹✘<←結構頁面（測試頁面）的(de)真容：

淺議(yì)內(nèi)滾動布局

看(kàn)著(zhe)此頁面，立馬讓我想起了(★≤le)6年(nián)前剛畢業(yè)那(nà)會(huì)的(de)青蔥歲月φ¥(yuè)，那(nà)時(shí)候的(de)頁面的(de)&↓≥基本上(shàng)就(jiù)是(shì)這(zhè)♠™樣的(de)調調，小(xiǎo)小(xiǎo)的(de)空(kōng)間(jiā‌☆πn)裡(lǐ)有(yǒu)著(zhe)小(xiǎo)小(xiǎo)的$ (de)世界。時(shí)代發展，再輝煌的(de)過去(qù)，如(rú)果沒有(£↓♥✔yǒu)改變，終将會(huì)被埋汰。

正是(shì)由于以上(shàng)兩點，設計(jì)師(shī)設計(jì)☆₽✘的(de)時(shí)候，大(dà)膽創新，設計(jì)成了(le)全屏自(zì)α≠适應、半響應、類PC軟件(jiàn)風(fēng)格(內(nèε§i)滾動)的(de)管理(lǐ)站(zhàn)點，下(xià)圖♣✘為(wèi)上(shàng)面老(lǎo)頁面同樣數(shù)據的(de)新測試頁面截圖：

淺議(yì)內(nèi)滾動布局

回到(dào)內(nèi)滾動布局本身(shēn)。

新版企業(yè)賬戶中心全站(zhàn)，頂部以及左₽ $側固定，不(bù)跟随滾動，右側主體(tǐ)內(nèi)滾動，如(rú)何實現(xià↓♥n)呢(ne)？

由于企業(yè)産品不(bù)用(yòn♥→β₩g)管0.4%的(de)IE6用(yòng)戶，因此，事(shì)件(♣jiàn)就(jiù)變得(de)簡單地(dì)多(duō)了(le)。我≥©<們可(kě)以利用(yòng)絕對(duì)定位元素的(de)拉伸特性，‍↑使內(nèi)滾動容器(qì)高(gāo)度自(zì)适應匹配。"≥→±HTML主結構示意如(rú)下(xià)：

body

-- page

-- header

-- side

-- content

其中page扮演傳統頁面<body&&£÷gt;的(de)角色。這(zhè)是(shì)一(yī)個(gè)預留設計(jì)，防α↔±止為(wèi)了(le)滿足某些(xiē)功能(néng)或交互體(tǐ)驗需'£λΩ要(yào)，一(yī)個(gè)頁面同時(shí)出現(δ↕xiàn)多(duō)個(gè)類似結構頁面的(de)情況。或者這(zhè)麽說(shuō∑≈)吧(ba)，把所有(yǒu)頁面內(nèi)容放(fàng)在一(yī)個(gè)page中，此£•時(shí)page就(jiù)好(hǎo)比一(yī)個(gè)可(k¥↕&<ě)以移動的(de)房(fáng)子(zǐ)，回頭你(nǐ)跳(tià≥γ∞δo)槽來(lái)騰訊了(le)，房(fáng)子(zǐ)可(kě)以一(♥♥§yī)起帶過來(lái)，原來(lái)的( ↑€de)位置可(kě)以被其他(tā)房(fáng)π₩<子(zǐ)代替。但(dàn)是(shì)，你(nǐ)如(rú)果直接放(fàng)在<bo₹ ±dy>中，由于<body>隻能(néng)δ'是(shì)一(yī)個(gè)，不(bù)動産，此時(shí)想要(yào)做(zuò)整體("φ✔€tǐ)遷移，難度就(jiù)較大(dà)，同時(shí)項目幾乎成型，全局♦®"修改成本高(gāo)高(gāo)風(fēng)險大(dà)。不(bù)過凡✘λ®事(shì)都(dōu)有(yǒu)兩面性，這(zhè)樣的(de)折騰γ₽可(kě)以減少(shǎo)你(nǐ)白(bái)頭發的(de)數(shù)目，因為(wèi→≈♥<)你(nǐ)會(huì)因操勞過度頭發直接脫掉的(de)。

page相(xiàng)關CSS如(rú)下(xià)：

.page { position: absolute; t± op: 0; right: 0; bottom: 0; left: 0; }

應該很(hěn)好(hǎo)理(lǐ)解，絕對(d₩₩uì)定位，滿屏拉伸，等同于：

.page { position: abσ§solute; top: 0; left: 0;¥§≈× width: 100%; height: 100%; }♠<↔'

由于省了(le)好(hǎo)幾個(gè)字節，所以我¥★‌舍棄了(le)IE6使用(yòng)了(le)上(sh↔✘σàng)面寫法。

對(duì)于固定的(de)頭部header或者固定的(de)側邊side, 你δ₹(nǐ)可(kě)以使用(yòng)語義明(míng)确的(de)position ¶§":fixed定位，或者直接使用(yòng)position:absolut≤→✔e，因為(wèi)滾動容器(qì)跟他(tā)們平級，所以，absolute其實就(jiù♦±≈ )是(shì)fixed效果。

講到(dào)這(zhè)裡(lǐ)就(jiù♥>Ωα)不(bù)得(de)不(bù)說(shuō)點題外(wà§$™i)話(huà)，很(hěn)多(duō)人(rén)會(huì)遇到(dàoγ'←&)移動端position:fixed的(de)底部輸入框定位的(de)頭疼問(wè≤<→♠n)題，如(rú)何解決？就(jiù)是(shì)使用(yòng)本文(wén)介紹的(d±₩e)內(nèi)滾動布局，然後底部使用(yòng)position:×€↓÷absolute模拟fixed效果。淺議(₩↔☆≤yì)內(nèi)滾動布局

代碼方面，同樣就(jiù)是(shì)拉伸拉伸：

.header { height: 62px; position: absolute; top•₹♣: 0; right: 0; left: 0; }

.side { width: 200px; p₹₽ε€osition: absolute; top: 62px; bottom: 0; ‌>left: 0; }

最後就(jiù)是(shì)高(gāo)能(néng)的(de)cont☆±ent, 還(hái)是(shì)一(yī)樣的(de)套路(lù♦≠ ★)：

.content { position: absolute; top: 62px© <; right: 0; bottom: 0; ε×left: 200px; overflow: auto; ‍↓‌}

主體(tǐ)內(nèi)容全部都(dōu)在content裡(lǐ)面玩γ♦(wán)耍。于是(shì)，一(yī)個(gè)高(gāo)寬均自(z÷£ ì)适應浏覽器(qì)窗(chuāng)體(tǐ)的(de)內(nèi)滾動布局就(jiù)成×≤ ★型了(le)。

四、內(nèi)滾動布局的(de)賞與罰§×

我們站(zhàn)在上(shàng)帝視(shì)角審視(‌÷♥shì)一(yī)下(xià)內(nèiδ )滾動布局，本質上(shàng)就(jiù)是(shì)滾動容器(qì)的(de)遷λ•ε移，職能(néng)下(xià)發。所以絕大(dà)部分(fēn)÷★情況下(xià)，跟我們平常玩(wán)轉頁面的(de)路(÷γlù)數(shù)沒什(shén)麽區(qū)别。

但(dàn)是(shì)，畢竟江山(shān)↓δ∑易主，差異還(hái)是(shì)存在的(de)。最簡單的(de)例子(≥"≤zǐ)就(jiù)是(shì)對(duì)滾動事(shì)件(jiàn)的(de)影(yǐ♦<<ng)響。很(hěn)多(duō)滾動插件(jiàn)，包括以前的(dβ™e)腳本，我們可(kě)能(néng)都(dōu)是(shì)這(zh<‍è)麽寫的(de)：

$(window).scroll(function() {

// 跟我一(yī)起翻滾吧(ba)，騷年(nián)…©Ω…

});

但(dàn)是(shì)，在內(nèi)滾動布局下(xià)，由于滾動的( &$de)容器(qì)不(bù)是(shì)window窗( ↔ ∏chuāng)體(tǐ)，不(bù)是(shì)<'±™;html>元素，因此，上(shàng)面滾φ δ→動事(shì)件(jiàn)八輩子(zǐ)都(dōu)不(bù)會±₹&σ(huì)執行(xíng)。我們需要(yào)調整，由于現(xiàn)在，頁面的(de± )主滾動條是(shì).content, 因此，我們可(kě)以：

$(".content").scroll(function() {

// 跟我一(yīφβ)起翻滾吧(ba)，騷年(nián) again……

});

你(nǐ)以為(wèi)事(shì)情就(jiù)這(zhè)麽完了‌↕δ(le)嗎(ma)？太天真了(le)！以前我們的(de)滾動條是(shì)跟浏覽器(qì)上(s$→® hàng)邊緣是(shì)靠在一(yī) ♥™起的(de)，但(dàn)是(shì)，自(zì)從(có♠✔ng)變成了(le)內(nèi)滾動，滾動條是(shì)跟網站(ε₹∏zhàn)公用(yòng)頭部下(xià)邊緣排排站(zhàn)，這<‌♠•(zhè)會(huì)造成什(shén)麽問(wèn)題呢(ne)？就(j ¶¶•iù)是(shì)一(yī)些(xiē)offset的(de)計(jì)算(su€≈¶àn)要(yào)發生(shēng)一(yī)些•'(xiē)變化(huà)。舉個(gè)例子(zǐ)，我們希望表格頭部操作(‍≈zuò)區(qū)域有(yǒu)類似position:sticky效果，也(yě♦≤">)就(jiù)是(shì)視(shì)區(qū)內(nèi)一(yī)•×起翻滾，要(yào)被滾出去(qù)的(de)時(shí)候，fixed固定，不(€¶bù)跟随。

淺議(yì)內(nèi)滾動布局

此時(shí)，我們的(de)最大(dà)滾動高(gāo)度值，就(jiù)需要(yàσ♣§✘o)把網站(zhàn)頭部的(de)高(gāo)度考慮進去(qù)（傳£‍≥統窗(chuāng)體(tǐ)滾動不(bù)需要(★πδyào)，因為(wèi)值是(shì)0）：

var maxScrollTop = $("←‌ #tableHeader").off✔≠♥set().top - $(".header").heiφ♦ght();

以上(shàng)這(zhè)個(gè)，我們可(kě)以稱之為(wèi)“變化(h←€uà)”，與原本的(de)實現(xiàn)相(xiàng)π‍"比無功無過，一(yī)種變化(huà)一(yī)λ♦®↔種轉移。實際上(shàng)，內(nèi)滾動布局還(hái)會(huì≥≥☆↑)帶來(lái)帶有(yǒu)質變性質的(de)一(yī)些(xiē)特性。

無法滾動的(de)彈出層

基本上(shàng)，是(shì)個(gè)像樣的(de)web2.0網站(zhàn)都€‍₩≥(dōu)會(huì)有(yǒu)彈框web組件(jiàn×)，一(yī)個(gè)黑(hēi)色半透明(míng)的( ‌÷de)overlay層，上(shàng)面搖曳著(zhe)彈框面闆±™≥，例如(rú)這(zhè)樣的(de)：

淺議(yì)內(nèi)滾動布局

對(duì)于黑(hēi)色半透明(míng)覆蓋層，傳統實δσ₽現(xiàn)是(shì)這(zhè)樣的(de)：如(rú)果要(yào)兼容‌"∑★IE6浏覽器(qì)，一(yī)般是(shì)absolute絕對(duì)定位，高(↑♥'₽gāo)度由JS計(jì)算(suàn)賦予；如(rú)果不(bù)需要(yào)管&¥≤↔IE6, 則可(kě)以使用(yòng)fixed固定定位。

然而，在內(nèi)滾動布局下(xià)，“賞”就(jiù)出來(×©lái)了(le)，就(jiù)算(suàn≤‌¥)需要(yào)兼容IE6浏覽器(qì)，黑(hēi)色半透明(α≥∏míng)高(gāo)寬100%自(zì)适應×§ 覆蓋也(yě)不(bù)需要(yào)任何JS計(jì)算(suàn)的(de)幫助，÷≈σ也(yě)不(bù)需要(yào)監聽(tīng)window的(&₹λde)resize事(shì)件(jiàn)，φ♥直接CSS就(jiù)可(kě)以搞定。很(¶ →hěn)簡單：

.overlay { position: absolute; left:←₽ 0; top: 0; width: 100%; height‍∞: 100%; }

為(wèi)啥一(yī)行(xíng)CSS就(jiù)能(néng)搞定所∑ 有(yǒu)場(chǎng)景？因為(wèi)使用(yòn™♥δ→g)的(de)是(shì)內(nèi)滾動布局，如(rú)下(xià)圖示意≠§≤ ，屏幕就(jiù)這(zhè)麽高(gāo)，滾動在裡(lǐγ± )面，自(zì)然自(zì)适應：

淺議(yì)內(nèi)滾動布局

看(kàn)上(shàng)去(qù)是(shì)內(nèi)滾動布局帶來(lái)的(↓β♠>de)一(yī)個(gè)小(xiǎo)小(x•σ•iǎo)的(de)“賞”，但(dàn)是(shì)，實際上(shàng)，埋下(xi∞Ω≥'à)了(le)一(yī)個(gè)不(bù)小(xiǎo)的(de)“罰”。

100%尺寸的(de)position:abs↕αγolute/fixed的(de)覆蓋層，會(huì)覆¶ ♠蓋任何非<html>元素(包括<body>)(包括這±✘(zhè)些(xiē)元素的(de)滾動條)，因此，隻要(φ↔≠yào)覆蓋+滾動容器(qì)改變，頁面就(jiù)無法滾動。

內(nèi)滾動布局是(shì)典型的(de)改變浏覽器(qì)默認滾動容器(π≥πqì)的(de)布局，自(zì)然覆蓋層一(yī)出現(xiàn)，就(jiù)沒法滾動。∏σφ不(bù)過這(zhè)也(yě)沒什(shén)麽，對(duì)吧(ba)，彈框出現(xδ↓iàn)時(shí)候，頁面背景沒法滾也(yě)挺好(hǎo)的(de)。

但(dàn)是(shì)，麻煩的(de)事(shì)情是(shì)，如(♥πrú)果彈框自(zì)身(shēn)高(gāo)度很(hěn)高(gāo)，★δ×λ卻又(yòu)沒法滾動呢(ne)(浏覽器(qì)可(kě)用(yòng∏ε≈)高(gāo)度700像素，彈框有(yǒu)900像素∞λ✘高(gāo))？

傳統布局下(xià)的(de)彈框，如(rú)果高(gāo)度很(hěn)高(gāo)，★★直接設置彈框容器(qì)position:absolute就(jiù)可(kě)以愉快(€£kuài)地(dì)上(shàng)下(xià¥λ•)翻滾了(le)。但(dàn)是(shì)，在內(nèi)滾動布局下(xià)，彈框ΩΩ✘根本就(jiù)不(bù)在滾動容器(qì)裡γ£δ‌(lǐ)面，翻滾一(yī)說(shuō)從(cóng)何σ€∏$談起？

大(dà)危機(jī)！怎麽辦！？

我們新版企業(yè)賬戶中心就(jiù)遇到(dào)這(zhè)個(gè)問(wèδ★n)題，我是(shì)這(zhè)麽解決的(ππ∏₩de)——overlay和(hé)dialog合體(tǐ)。¶δ

合體(tǐ)與滾動

合體(tǐ)是(shì)什(shén)麽₩↔意思呢(ne)？基本上(shàng)，90%+的(de)彈框組件(jiàn)，半§✔×₩透明(míng)覆蓋層overlay和(hé)彈框dialog是(shì)兩♠&個(gè)并列的(de)兄弟(dì)關系的(de)獨立的(de)元素，這(zhè)種設<₩>'計(jì)的(de)好(hǎo)處在于overlay組件(jiàn)可(kě)以複用(yòng)。ε♠©實際上(shàng)，我們要(yào)實現(xiàn)一(¥&yī)個(gè)彈框效果，隻要(yào)一(yī)層div标簽就(ji≥×ù)可(kě)以了(le)，核心就(jiù)是(shì)使用(yòng)兼容的(de)•↑RGBA背景色技(jì)巧，然後彈框HTML放(fàng)在裡(lǐ)面：

.container {

position: absolute; top:‌≈ 0; left: 0; bottom: 0; width: 10Ω∞0%;

background-color: rgba(0 δβ,0,0,.5);

filter→β∏£: progid:DXImageTransform.Microsoft.gradient(star±✘≠tcolorstr=#7F000000,en÷Ω∏dcolorstr=#7F000000);

overflow: ₽Ωauto;

}

:root .container {

/* IE9 無 filter */

filter: none←β÷‍;

}

HTML結構示意如(rú)下(xià)：

<div>

</div>

此時(shí)，彈框在一(yī)個(gè)可(kě)滾動的(de)容器(qì)之中，媽(m♦ £ā)媽(mā)再也(yě)不(bù)用(yò>₩'↑ng)擔心我不(bù)能(néng)愉快(kuài)地(d€σ$ì)翻滾了(le)！

淺議(yì)內(nèi)滾動布局

五、結束語

由于傳統窗(chuāng)體(tǐ)滾動已經深入人(rén)心♥←© ，所以我們可(kě)能(néng)會(huì)覺得(de)內(±< ✔nèi)滾動布局似乎有(yǒu)些(xiē)坑；但(•φ$€dàn)是(shì)，如(rú)果當年(nián)是(shì)↕✔↔"內(nèi)滾動布局天下(xià)，我們又(yòu)≤↑₽←該如(rú)何看(kàn)待新興的(de)窗(chuā♠$✔ng)體(tǐ)滾動布局呢(ne)？然後，從(cóng)産品的(de)角度講，內(nèi)滾✘♦動布局在操作(zuò)如(rú)此頻(pín)繁的(de)重交互項目中所帶來(lái)的(de)交‌&¶互體(tǐ)驗上(shàng)的(de)改進，要(≥‌≈yào)遠(yuǎn)比經驗不(bù)足帶來(lái)的(de)額外(↕÷✘≈wài)開(kāi)發成本要(yào)大(dà)₩£γγ很(hěn)多(duō)很(hěn)多(duō)。

我相(xiàng)信，這(zhè)種交互形式以及web布局上(shàng)的(de)創新₩♠★≤一(yī)定會(huì)帶來(lái)很(hěn)多(du$±₩★ō)正面的(de)反饋和(hé)積極的(de)影(yǐng↓★<)響，産品即将上(shàng)線，我們可(kě)以拭目以待¥☆© 。

注：本文(wén)均來(lái)自(zì)百度搜索，≤&♦如(rú)涉及版權問(wèn)題，請(qǐng)聯系我們，我們會(huì∞‍)第一(yī)時(shí)間(jiān)解決。

上(shàng)一(yī)條：網頁設計(jì)師(shī)必知(zhī)的(de)高(gāo)效導航設計(jì)三原則

下(xià)一(yī)條：來(lái)看(kàn)看(kàn)将成<γ₩為(wèi)明(míng)日(rì)主流的(de)7大(dà≥≠≠)網頁設計(jì)趨勢

返回列表

Our News

動态

淺議(yì)網站(zhàn)內(nèi)滾動布局的(de)概念與實現(xiàn)方法 §‍>

發布日(rì)期：2015-06-26

來(lái)源：admin

浏覽量：5025

字體(tǐ)：【大(dà) 中小(xiǎo) 】

Our News

動态

淺議(yì)網站(zhàn)內(nèi)滾動布局的(de)概念與實現(xiàn)方法 §‍>

發布日(rì)期：2015-06-26 來(lái)源：admin 浏覽量：5025 字體(tǐ)：【 大(dà) 中 小(xiǎo) 】

發布日(rì)期：2015-06-26

來(lái)源：admin

浏覽量：5025

字體(tǐ)：【大(dà) 中小(xiǎo) 】