許多桌面軟件都采用內(nèi)滾動布局诈唬，交互性比較強(qiáng)的的web頁面（如：各種后臺管理系統(tǒng)）進(jìn)行桌面軟件化可以使得交互操作更加方便快捷。
一窿冯、什么是內(nèi)滾動布局凤跑？
內(nèi)滾動布局的布局效果：頂部和左側(cè)菜單欄固定，不隨頁面滾動氢烘；右側(cè)內(nèi)容區(qū)域相對于頁面的其他部分滾動怀偷。
『內(nèi)滾動布局』的主滾動條 位于 html 下的某個元素上（即位于某個需要滾動的區(qū)域上）；
而『傳統(tǒng)滾動布局』的主滾動條 則位于 html 上播玖；
二椎工、為什么會有內(nèi)滾動布局？
隨著顯示器設(shè)備越大越寬越密蜀踏，以及現(xiàn)代web技術(shù)的發(fā)展维蒙。web站點(diǎn)已經(jīng)開始有了從傳統(tǒng)的瀑布式網(wǎng)頁向類桌面軟件風(fēng)格站點(diǎn)轉(zhuǎn)變的趨勢。
比方說果覆，QQ音樂的首頁目前是這樣子的：
以后可能就會變成這樣子：
我們可以局部放大颅痊，會發(fā)現(xiàn)，是個實(shí)打?qū)嵉膬?nèi)滾動布局局待。
不僅是QQ音樂斑响，其他很多桌面軟件都是這種內(nèi)滾動布局，比方說QQ軟件管家等等钳榨。
由此可見舰罚，一旦強(qiáng)交互的傳統(tǒng)web頁面桌面軟件化，內(nèi)滾動布局是繞不開的一堵墻薛耻，了解之還是很有必要的营罢。
三、如何實(shí)現(xiàn)內(nèi)滾動布局饼齿？
既然是內(nèi)滾動愤钾，就有必要干掉瀏覽器原生<html>的滾動條瘟滨，這個很簡單：
html { overflow: hidden; }
“然后呢？”我想了想能颁，好像然后就沒有“然后”了，讓一個div容器滾動就完事了倒淫。
然而伙菊，事非經(jīng)過不知難，原理雖然簡單沒說頭敌土，但是細(xì)節(jié)操作還是有些上手成本的镜硕。
為了更好理解，我們拿實(shí)例說話返干。最近半年一直在參與企業(yè)QQ賬戶中心改版的項(xiàng)目兴枯，你可以看成是企業(yè)后臺管理系統(tǒng)。這里有幾個關(guān)鍵字矩欠，一是企業(yè)财剖，二是管理系統(tǒng)。
1. 企業(yè)
這里為什么要強(qiáng)調(diào)是“企業(yè)”呢癌淮？因?yàn)槠髽I(yè)產(chǎn)品的用戶一般都是購買了企業(yè)QQ產(chǎn)品的企業(yè)的員工躺坟，有一定IT技能的人。因此乳蓄，用戶的瀏覽器的現(xiàn)代感就比Qzone用戶強(qiáng)不少咪橙。下圖為同事在2015-05-20這個愛意滿滿的日子拉的userAgent數(shù)據(jù)：
如果我們將支持CSS3 animation的瀏覽器稱之為現(xiàn)代瀏覽器，可以發(fā)現(xiàn)虚倒，企業(yè)產(chǎn)品的用戶美侦，70%~80%的用戶都是使用的現(xiàn)代瀏覽器。親們魂奥，近8成的用戶都是使用現(xiàn)代瀏覽器菠剩，這就意味著，企業(yè)產(chǎn)品其實(shí)可以作為現(xiàn)代web技術(shù)的試驗(yàn)田捧弃，在為用戶提供更好體驗(yàn)更高質(zhì)量產(chǎn)品的同時赠叼，為日后其他產(chǎn)品的現(xiàn)代化改造提供了寶貴的借鑒經(jīng)驗(yàn)。而本文的內(nèi)滾動布局违霞，就是萬千經(jīng)驗(yàn)中的一小個嘴办。
2. 管理系統(tǒng)
“管理系統(tǒng)”意味著站點(diǎn)以強(qiáng)交互為主，會有很多類似辦公軟件的交互操作在里面买鸽。如果是更偏重瀏覽的站點(diǎn)涧郊，例如企業(yè)QQ官網(wǎng)，顯然眼五，傳統(tǒng)的垂直瀑布式的網(wǎng)站是更適合的妆艘，滾動瀏覽彤灶，再滾動，再瀏覽批旺。但是幌陕，企業(yè)管理系統(tǒng)如此龐大，操作如此頻繁汽煮，交互如此之多搏熄，傳統(tǒng)的上下式網(wǎng)站顯然很難讓用戶用得非常得心應(yīng)手。
下圖為以前企業(yè)QQ賬戶中心組織結(jié)構(gòu)頁面（測試頁面）的真容：
看著此頁面暇赤，立馬讓我想起了6年前剛畢業(yè)那會的青蔥歲月心例，那時候的頁面的基本上就是這樣的調(diào)調(diào)，小小的空間里有著小小的世界鞋囊。時代發(fā)展止后，再輝煌的過去，如果沒有改變溜腐，終將會被埋汰译株。
正是由于以上兩點(diǎn)，設(shè)計師設(shè)計的時候逗扒，大膽創(chuàng)新古戴，設(shè)計成了全屏自適應(yīng)、半響應(yīng)矩肩、類PC軟件風(fēng)格(內(nèi)滾動)的管理站點(diǎn)现恼，下圖為上面老頁面同樣數(shù)據(jù)的新測試頁面截圖：
回到內(nèi)滾動布局本身。
新版企業(yè)賬戶中心全站黍檩，頂部以及左側(cè)固定叉袍，不跟隨滾動，右側(cè)主體內(nèi)滾動刽酱，如何實(shí)現(xiàn)呢喳逛？
由于企業(yè)產(chǎn)品不用管0.4%的IE6用戶，因此棵里，事件就變得簡單地多了润文。我們可以利用絕對定位元素的拉伸特性，使內(nèi)滾動容器高度自適應(yīng)匹配殿怜。
HTML主結(jié)構(gòu)示意如下：
body
-- page
-- header
-- side
-- content
其中++page扮演傳統(tǒng)頁面<body>的角色典蝌。這是一個預(yù)留設(shè)計，用于應(yīng)對：為了滿足某些功能或交互體驗(yàn)需要头谜，一個頁面同時出現(xiàn)多個類似結(jié)構(gòu)頁面的情況++骏掀。或者這么說吧，把所有頁面內(nèi)容放在一個page中截驮，此時page就好比一個可以移動的房子笑陈，回頭你跳槽來騰訊了，房子可以一起帶過來葵袭，原來的位置可以被其他房子代替涵妥。但是，你如果直接放在<body>中坡锡，由于<body>只能是一個妹笆，不動產(chǎn)，此時想要做整體遷移娜氏，難度就較大，同時項(xiàng)目幾乎成型墩新，全局修改成本高高風(fēng)險大贸弥。不過凡事都有兩面性，這樣的折騰可以減少你白頭發(fā)的數(shù)目海渊，因?yàn)槟銜虿賱谶^度頭發(fā)直接脫掉的绵疲。
page相關(guān)CSS如下：
.page { position: absolute; top: 0; right: 0; bottom: 0; left: 0; }
應(yīng)該很好理解，絕對定位臣疑，++滿屏拉伸++盔憨，等同于：
.page { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
由于省了好幾個字節(jié)，所以我舍棄了IE6使用了上面寫法讯沈。
對于固定的頭部 header 或者固定的側(cè)邊 side, 你可以使用語義明確的position:fixed定位郁岩，或者直接使用position:absolute，因?yàn)闈L動容器跟他們平級缺狠，所以问慎，absolute其實(shí)就是fixed效果。
講到這里就不得不說點(diǎn)題外話挤茄，很多人會遇到移動端
position:fixed的底部輸入框定位的頭疼問題如叼，如何解決？就是使用本文介紹的內(nèi)滾動布局穷劈，然后底部使用position:absolute模擬fixed效果笼恰。代碼方面，同樣就是拉伸拉伸：
```
.header { height: 62px; position: absolute; top: 0; right: 0; left: 0; }
.side { width: 200px; position: absolute; top: 62px; bottom: 0; left: 0; }
```
最后就是高能的content, 還是一樣的套路：
.content { position: absolute; top: 62px; right: 0; bottom: 0; left: 200px; overflow: auto; }
主體內(nèi)容全部都在content里面玩耍歇终。于是社证，一個高寬均自適應(yīng)瀏覽器窗體的內(nèi)滾動布局就成型了。
四练湿、內(nèi)滾動布局的賞與罰
我們站在上帝視角審視一下內(nèi)滾動布局猴仑，本質(zhì)上就是滾動容器的遷移，職能下發(fā)。所以絕大部分情況下辽俗，跟我們平常玩轉(zhuǎn)頁面的路數(shù)沒什么區(qū)別疾渣。
但是，畢竟江山易主崖飘，差異還是存在的榴捡。
最簡單的例子就是對滾動事件的影響。很多滾動插件朱浴，包括以前的腳本吊圾，我們可能都是這么寫的：
$(window).scroll(function() {
// 跟我一起翻滾吧，騷年……
});
但是翰蠢，在內(nèi)滾動布局下项乒，由于滾動的容器不是 window 窗體，不是<html>元素梁沧，因此檀何，上面滾動事件八輩子都不會執(zhí)行。我們需要調(diào)整廷支，由于現(xiàn)在频鉴，頁面的主滾動條是 .content, 因此，我們可以：
$(".content").scroll(function() {
// 跟我一起翻滾吧恋拍，騷年 again……
});
你以為事情就這么完了嗎垛孔？太天真了！以前我們的滾動條是跟瀏覽器上邊緣是靠在一起的施敢，但是周荐，自從變成了內(nèi)滾動，滾動條是跟網(wǎng)站公用頭部下邊緣排排站悯姊，這會造成什么問題呢羡藐？就是一些offset的計算要發(fā)生一些變化。舉個例子悯许，我們希望表格頭部操作區(qū)域有類似position:sticky效果仆嗦，也就是視區(qū)內(nèi)一起翻滾，要被滾出去的時候先壕，fixed固定瘩扼，不跟隨。
此時垃僚，我們的最大滾動高度值集绰，就需要把網(wǎng)站頭部的高度考慮進(jìn)去（傳統(tǒng)窗體滾動不需要，因?yàn)橹凳?）：
var maxScrollTop = $("#tableHeader").offset().top - $(".header").height();
以上這個谆棺，我們可以稱之為“變化”栽燕，與原本的實(shí)現(xiàn)相比無功無過罕袋，一種變化一種轉(zhuǎn)移。實(shí)際上碍岔，內(nèi)滾動布局還會帶來帶有質(zhì)變性質(zhì)的一些特性浴讯。
無法滾動的彈出層
基本上，是個像樣的 web2.0 網(wǎng)站都會有彈框 web 組件蔼啦，一個黑色半透明的 overlay 層榆纽，上面搖曳著彈框面板，例如這樣的：
++對于黑色半透明覆蓋層++捏肢，
傳統(tǒng)實(shí)現(xiàn)是這樣的：如果要兼容IE6瀏覽器奈籽，一般是absolute絕對定位，高度由JS計算賦予鸵赫；如果不需要管IE6, 則可以使用fixed固定定位衣屏。
然而，在內(nèi)滾動布局下辩棒，“賞”就出來了勾拉，就算需要兼容IE6瀏覽器，黑色半透明高寬100%自適應(yīng)覆蓋也不需要任何JS計算的幫助盗温，也不需要監(jiān)聽window的resize事件，直接CSS就可以搞定成肘。很簡單：
.overlay { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
為啥一行CSS就能搞定所有場景卖局？因?yàn)槭褂玫氖莾?nèi)滾動布局，如下圖示意双霍，屏幕就這么高砚偶，滾動在里面，自然自適應(yīng)：
看上去是內(nèi)滾動布局帶來的一個小小的“賞”洒闸，但是染坯，實(shí)際上，埋下了一個不小的“罰”丘逸。
隨意改變滾動容器最大的問題在于单鹿，當(dāng)存在覆蓋層的時候，會影響背后頁面內(nèi)容的滾動深纲。
100%尺寸的position:absolute/fixed的覆蓋層仲锄，會覆蓋任何非<html>元素(包括<body>)(包括這些元素的滾動條)，因此湃鹊，只要覆蓋+滾動容器改變儒喊，頁面就無法滾動。
內(nèi)滾動布局是典型的改變?yōu)g覽器默認(rèn)滾動容器的布局币呵，自然覆蓋層一出現(xiàn)怀愧，就沒法滾動。不過這也沒什么，對吧芯义，彈框出現(xiàn)時候哈垢，頁面背景沒法滾也挺好的。
但是毕贼，麻煩的事情是温赔，如果彈框自身高度很高，卻又沒法滾動呢(瀏覽器可用高度700像素鬼癣，彈框有900像素高)陶贼？
傳統(tǒng)布局下的彈框，如果高度很高待秃，直接設(shè)置彈框容器position:absolute就可以愉快地上下翻滾了拜秧。但是，在內(nèi)滾動布局下章郁，彈框根本就不在滾動容器里面枉氮，翻滾一說從何談起？
大危機(jī)暖庄！怎么辦Ａ奶妗？
我們新版企業(yè)賬戶中心就遇到這個問題培廓，我是這么解決的——overlay和dialog合體惹悄。
合體與滾動
合體是什么意思呢？基本上肩钠，90%+的彈框組件泣港，半透明覆蓋層overlay和彈框dialog是兩個并列的兄弟關(guān)系的獨(dú)立的元素，這種設(shè)計的好處在于overlay組件可以復(fù)用价匠。實(shí)際上当纱，我們要實(shí)現(xiàn)一個彈框效果，只要一層div標(biāo)簽就可以了踩窖，核心就是使用兼容的RGBA背景色技巧坡氯，然后彈框HTML放在里面：
.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結(jié)構(gòu)示意如下：
<div>
<dialog></dialog>
</div>
此時，彈框在一個可滾動的容器之中洋腮，媽媽再也不用擔(dān)心我不能愉快地翻滾了廉沮！
五、結(jié)束語
由于傳統(tǒng)窗體滾動已經(jīng)深入人心徐矩，所以我們可能會覺得內(nèi)滾動布局似乎有些坑滞时；但是，如果當(dāng)年是內(nèi)滾動布局天下滤灯，我們又該如何看待新興的窗體滾動布局呢坪稽？然后曼玩，從產(chǎn)品的角度講，內(nèi)滾動布局在操作如此頻繁的重交互項(xiàng)目中所帶來的交互體驗(yàn)上的改進(jìn)窒百，要遠(yuǎn)比經(jīng)驗(yàn)不足帶來的額外開發(fā)成本要大很多很多黍判。
我相信，這種交互形式以及web布局上的創(chuàng)新一定會帶來很多正面的反饋和積極的影響篙梢，產(chǎn)品即將上線顷帖，我們可以拭目以待。
內(nèi)滾動布局渤滞，更現(xiàn)代贬墩，更移動，如果您的項(xiàng)目合適妄呕，不妨也試試這種看似新穎的布局方式陶舞。
轉(zhuǎn)自：優(yōu)設(shè)
原文：騰訊ISUX
作者：zhang xinxu
