一、什麼(me)是内滾動布局？
所謂“内滾動布局”，顧名思義就是主滾動條在頁面(miàn)内部的布局，是相對(duì)于傳統的<html>滾動而言的，例如，下圖所示滾動條，是從頭部下方開(kāi)始：
淺議内滾動布局
傳統的頁面(miàn)滾動，基本上是相對(duì)于整個浏覽器窗體，例如，QQ視頻首頁：
淺議内滾動布局
二、爲什麼(me)會有内滾動布局？
随著(zhe)顯示器設備越大越寬越密，以及現代web技術的發(fā)展。web站點已經(jīng)開(kāi)始有了從傳統的瀑布式網頁向(xiàng)類桌面(miàn)軟件風格站點轉變的趨勢。比方說，QQ音樂的首頁目前是這(zhè)樣(yàng)子的：
淺議内滾動布局
以後(hòu)可能(néng)就會變成(chéng)這(zhè)樣(yàng)子：
淺議内滾動布局
内蒙古網站制作，内蒙古網站設計，内蒙古網站建設，呼和浩特網站建設，呼和浩特網站制作、呼和浩特網站設計首選内蒙古呼和浩特先誠網絡科技公司。先誠官網：/
“納尼，這(zhè)不就是現在的QQ音樂軟件界面(miàn)截圖？”“這(zhè)位同學(xué)眼神很犀利，沒(méi)錯，這(zhè)就是有著(zhe)全國(guó)最大的正版高質量樂庫的QQ音樂PC版截圖”。
我們可以局部放大，會發(fā)現，是個實打實的内滾動布局。
淺議内滾動布局
不僅是QQ音樂，其他很多桌面(miàn)軟件都(dōu)是這(zhè)種(zhǒng)内滾動布局，比方說QQ軟件管家等等。
淺議内滾動布局
有此可見，一旦強交互的傳統web頁面(miàn)桌面(miàn)軟件化，内滾動布局是繞不開(kāi)的一堵牆，了解之還(hái)是很有必要的。
三、如何實現内滾動布局？
既然是内滾動，就有必要幹掉浏覽器原生<html>的滾動條，這(zhè)個很簡單：
html { overflow: hidden; }
“然後(hòu)呢？”我想了想，好(hǎo)像然後(hòu)就沒(méi)有“然後(hòu)”了，讓一個div容器滾動就完事(shì)了。
然而，事(shì)非經(jīng)過(guò)不知難，原理雖然簡單沒(méi)說頭，但是細節操作還(hái)是有些上手成(chéng)本的。
爲了更好(hǎo)理解，我們拿實例說話。最近半年一直在參與企業QQ賬戶中心改版的項目，你可以看成(chéng)是企業後(hòu)台管理系統。這(zhè)裡(lǐ)有幾個關鍵字，一是企業，二是管理系統。
1. 企業
這(zhè)裡(lǐ)爲什麼(me)要強調是“企業”呢？因爲企業産品的用戶一般都(dōu)是購買了企業QQ産品的企業的員工，有一定IT技能(néng)的人。因此，用戶的浏覽器的現代感就比Qzone用戶強不少。下圖爲同事(shì)在2015-05-20這(zhè)個愛意滿滿的日子拉的userAgent數據：
淺議内滾動布局
如果我們將(jiāng)支持CSS3 animation的浏覽器稱之爲現代浏覽器，可以發(fā)現，企業産品的用戶，70%~80%的用戶都(dōu)是使用的現代浏覽器。親們，近8成(chéng)的用戶都(dōu)是使用現代浏覽器，這(zhè)就意味著(zhe)，企業産品其實可以作爲現代web技術的試驗田，在爲用戶提供更好(hǎo)體驗更高質量産品的同時，爲日後(hòu)其他産品的現代化改造提供了寶貴的借鑒經(jīng)驗。而本文的内滾動布局，就是萬千經(jīng)驗中的一小個。
2. 管理系統
“管理系統”意味著(zhe)站點以強交互爲主，會有很多類似辦公軟件的交互操作在裡(lǐ)面(miàn)。如果是更偏重浏覽的站點，例如企業QQ官網，顯然，傳統的垂直瀑布式的網站是更适合的，滾動浏覽，再滾動，再浏覽。但是，企業管理系統如此龐大，操作如此頻繁，交互如此之多，傳統的上下式網站顯然很難讓用戶用得非常得心應手。下圖爲以前企業QQ賬戶中心組織結構頁面(miàn)（測試頁面(miàn)）的真容：
淺議内滾動布局
看著(zhe)此頁面(miàn)，立馬讓我想起(qǐ)了6年前剛畢業那會的青蔥歲月，那時候的頁面(miàn)的基本上就是這(zhè)樣(yàng)的調調，小小的空間裡(lǐ)有著(zhe)小小的世界。時代發(fā)展，再輝煌的過(guò)去，如果沒(méi)有改變，終將(jiāng)會被(bèi)埋汰。
正是由于以上兩(liǎng)點，設計師設計的時候，大膽創新，設計成(chéng)了全屏自适應、半響應、類PC軟件風格(内滾動)的管理站點，下圖爲上面(miàn)老頁面(miàn)同樣(yàng)數據的新測試頁面(miàn)截圖：
淺議内滾動布局
回到内滾動布局本身。
新版企業賬戶中心全站，頂部以及左側固定，不跟随滾動，右側主體内滾動，如何實現呢？
由于企業産品不用管0.4%的IE6用戶，因此，事(shì)件就變得簡單地多了。我們可以利用絕對(duì)定位元素的拉伸特性，使内滾動容器高度自适應匹配。HTML主結構示意如下：
body
-- page
-- header
-- side
-- content
其中page扮演傳統頁面(miàn)<body>的角色。這(zhè)是一個預留設計，防止爲了滿足某些功能(néng)或交互體驗需要，一個頁面(miàn)同時出現多個類似結構頁面(miàn)的情況。或者這(zhè)麼(me)說吧，把所有頁面(miàn)内容放在一個page中，此時page就好(hǎo)比一個可以移動的房子，回頭你跳槽來騰訊了，房子可以一起(qǐ)帶過(guò)來，原來的位置可以被(bèi)其他房子代替。但是，你如果直接放在<body>中，由于<body>隻能(néng)是一個，不動産，此時想要做整體遷移，難度就較大，同時項目幾乎成(chéng)型，全局修改成(chéng)本高高風險大。不過(guò)凡事(shì)都(dōu)有兩(liǎng)面(miàn)性，這(zhè)樣(yàng)的折騰可以減少你白頭發(fā)的數目，因爲你會因操勞過(guò)度頭發(fā)直接脫掉的。
page相關CSS如下：
.page { position: absolute; top: 0; right: 0; bottom: 0; left: 0; }
應該很好(hǎo)理解，絕對(duì)定位，滿屏拉伸，等同于：
.page { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
由于省了好(hǎo)幾個字節，所以我舍棄了IE6使用了上面(miàn)寫法。
對(duì)于固定的頭部header或者固定的側邊side, 你可以使用語義明确的position:fixed定位，或者直接使用position:absolute，因爲滾動容器跟他們平級，所以，absolute其實就是fixed效果。
講到這(zhè)裡(lǐ)就不得不說點題外話，很多人會遇到移動端position:fixed的底部輸入框定位的頭疼問題，如何解決？就是使用本文介紹的内滾動布局，然後(hòu)底部使用position:absolute模拟fixed效果。 淺議内滾動布局
代碼方面(miàn)，同樣(yàng)就是拉伸拉伸：
.header { height: 62px; position: absolute; top: 0; right: 0; left: 0; }
.side { width: 200px; position: absolute; top: 62px; bottom: 0; left: 0; }
最後(hòu)就是高能(néng)的content, 還(hái)是一樣(yàng)的套路：
.content { position: absolute; top: 62px; right: 0; bottom: 0; left: 200px; overflow: auto; }
主體内容全部都(dōu)在content裡(lǐ)面(miàn)玩耍。于是，一個高寬均自适應浏覽器窗體的内滾動布局就成(chéng)型了。
四、内滾動布局的賞與罰
我們站在上帝視角審視一下内滾動布局，本質上就是滾動容器的遷移，職能(néng)下發(fā)。所以絕大部分情況下，跟我們平常玩轉頁面(miàn)的路數沒(méi)什麼(me)區别。
但是，畢竟江山易主，差異還(hái)是存在的。最簡單的例子就是對(duì)滾動事(shì)件的影響。很多滾動插件，包括以前的腳本，我們可能(néng)都(dōu)是這(zhè)麼(me)寫的：
$(window).scroll(function() {
// 跟我一起(qǐ)翻滾吧，騷年……
});
但是，在内滾動布局下，由于滾動的容器不是window窗體，不是<html>元素，因此，上面(miàn)滾動事(shì)件八輩子都(dōu)不會執行。我們需要調整，由于現在，頁面(miàn)的主滾動條是.content, 因此，我們可以：
$(".content").scroll(function() {
// 跟我一起(qǐ)翻滾吧，騷年 again……
});
你以爲事(shì)情就這(zhè)麼(me)完了嗎？太天真了！以前我們的滾動條是跟浏覽器上邊緣是靠在一起(qǐ)的，但是，自從變成(chéng)了内滾動，滾動條是跟網站公用頭部下邊緣排排站，這(zhè)會造成(chéng)什麼(me)問題呢？就是一些offset的計算要發(fā)生一些變化。舉個例子，我們希望表格頭部操作區域有類似position:sticky效果，也就是視區内一起(qǐ)翻滾，要被(bèi)滾出去的時候，fixed固定，不跟随。
淺議内滾動布局
此時，我們的最大滾動高度值，就需要把網站頭部的高度考慮進(jìn)去（傳統窗體滾動不需要，因爲值是0）：
var maxScrollTop = $("#tableHeader").offset().top - $(".header").height();
以上這(zhè)個，我們可以稱之爲“變化”，與原本的實現相比無功無過(guò)，一種(zhǒng)變化一種(zhǒng)轉移。實際上，内滾動布局還(hái)會帶來帶有質變性質的一些特性。
無法滾動的彈出層
基本上，是個像樣(yàng)的web2.0網站都(dōu)會有彈框web組件，一個黑色半透明的overlay層，上面(miàn)搖曳著(zhe)彈框面(miàn)闆，例如這(zhè)樣(yàng)的：
淺議内滾動布局
對(duì)于黑色半透明覆蓋層，傳統實現是這(zhè)樣(yàng)的：如果要兼容IE6浏覽器，一般是absolute絕對(duì)定位，高度由JS計算賦予；如果不需要管IE6, 則可以使用fixed固定定位。
然而，在内滾動布局下，“賞”就出來了，就算需要兼容IE6浏覽器，黑色半透明高寬100%自适應覆蓋也不需要任何JS計算的幫助，也不需要監聽window的resize事(shì)件，直接CSS就可以搞定。很簡單：
.overlay { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
爲啥一行CSS就能(néng)搞定所有場景？因爲使用的是内滾動布局，如下圖示意，屏幕就這(zhè)麼(me)高，滾動在裡(lǐ)面(miàn)，自然自适應：
淺議内滾動布局
看上去是内滾動布局帶來的一個小小的“賞”，但是，實際上，埋下了一個不小的“罰”。
随意改變滾動容器最大的問題在于，當存在覆蓋層的時候，會影響背後(hòu)頁面(miàn)内容的滾動。
100%尺寸的position:absolute/fixed的覆蓋層，會覆蓋任何非<html>元素(包括<body>)(包括這(zhè)些元素的滾動條)，因此，隻要覆蓋+滾動容器改變，頁面(miàn)就無法滾動。
内滾動布局是典型的改變浏覽器默認滾動容器的布局，自然覆蓋層一出現，就沒(méi)法滾動。不過(guò)這(zhè)也沒(méi)什麼(me)，對(duì)吧，彈框出現時候，頁面(miàn)背景沒(méi)法滾也挺好(hǎo)的。
但是，麻煩的事(shì)情是，如果彈框自身高度很高，卻又沒(méi)法滾動呢(浏覽器可用高度700像素，彈框有900像素高)？
傳統布局下的彈框，如果高度很高，直接設置彈框容器position:absolute就可以愉快地上下翻滾了。但是，在内滾動布局下，彈框根本就不在滾動容器裡(lǐ)面(miàn)，翻滾一說從何談起(qǐ)？
大危機！怎麼(me)辦！？
我們新版企業賬戶中心就遇到這(zhè)個問題，我是這(zhè)麼(me)解決的——overlay和dialog合體。
合體與滾動
合體是什麼(me)意思呢？基本上，90%+的彈框組件，半透明覆蓋層overlay和彈框dialog是兩(liǎng)個并列的兄弟關系的獨立的元素，這(zhè)種(zhǒng)設計的好(hǎo)處在于overlay組件可以複用。實際上，我們要實現一個彈框效果，隻要一層div标簽就可以了，核心就是使用兼容的RGBA背景色技巧，然後(hòu)彈框HTML放在裡(lǐ)面(miàn)：
.container {
position: absolute; top: 0; left: 0; bottom: 0; width: 100%;
background-color: rgba(0,0,0,.5);
filter: progid:DXImageTransform.Microsoft.gradient(startcolorstr=#7F000000,endcolorstr=#7F000000);
overflow: auto;
}
:root .container {
/* IE9 無 filter */
filter: none;
}
HTML結構示意如下：
<div>
<dialog></dialog>
</div>
此時，彈框在一個可滾動的容器之中，媽媽再也不用擔心我不能(néng)愉快地翻滾了！
淺議内滾動布局
五、結束語
由于傳統窗體滾動已經(jīng)深入人心，所以我們可能(néng)會覺得内滾動布局似乎有些坑；但是，如果當年是内滾動布局天下，我們又該如何看待新興的窗體滾動布局呢？然後(hòu)，從産品的角度講，内滾動布局在操作如此頻繁的重交互項目中所帶來的交互體驗上的改進(jìn)，要遠比經(jīng)驗不足帶來的額外開(kāi)發(fā)成(chéng)本要大很多很多。
我相信，這(zhè)種(zhǒng)交互形式以及web布局上的創新一定會帶來很多正面(miàn)的反饋和積極的影響，産品即將(jiāng)上線，我們可以拭目以待。
内滾動布局，更現代，更移動，如果您的項目合适，不妨也試試這(zhè)種(zhǒng)看似新穎的布局方式。
注：本文均來自百度搜索，如涉及版權問題，請聯系我們，我們會第一時間解決。
copyright © 呼和浩特市榮科商貿有限責任公司 Reserved
呼和浩特市榮科商貿有限責任公司