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

2022-06-01 分類：網(wǎng)站建設

一、什么是內(nèi)滾動布局？

所謂“內(nèi)滾動布局”，顧名思義就是主滾動條在頁面內(nèi)部的布局，是相對于傳統(tǒng)的<html>滾動而言的，例如，下圖所示滾動條，是從頭部下方開始：

傳統(tǒng)的頁面滾動，基本上是相對于整個瀏覽器窗體，例如，QQ視頻首頁：

二、為什么會有內(nèi)滾動布局？

隨著顯示器設備越大越寬越密，以及現(xiàn)代web技術的發(fā)展。web站點已經(jīng)開始有了從傳統(tǒng)的瀑布式網(wǎng)頁向類桌面軟件風格站點轉(zhuǎn)變的趨勢。比方說，QQ音樂的首頁目前是這樣子的：

以后可能就會變成這樣子：

“納尼，這不就是現(xiàn)在的QQ音樂軟件界面截圖？”“這位同學眼神很犀利，沒錯，這就是有著全國大的正版高質(zhì)量樂庫的QQ音樂PC版截圖”。

我們可以局部放大，會發(fā)現(xiàn)，是個實打?qū)嵉膬?nèi)滾動布局。

不僅是QQ音樂，其他很多桌面軟件都是這種內(nèi)滾動布局，比方說QQ軟件管家等等。

有此可見，一旦強交互的傳統(tǒng)web頁面桌面軟件化，內(nèi)滾動布局是繞不開的一堵墻，了解之還是很有必要的。

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

既然是內(nèi)滾動，就有必要干掉瀏覽器原生<html>的滾動條，這個很簡單：

html { overflow: hidden; }

“然后呢？”我想了想，好像然后就沒有“然后”了，讓一個div容器滾動就完事了。

然而，事非經(jīng)過不知難，原理雖然簡單沒說頭，但是細節(jié)操作還是有些上手成本的。

為了更好理解，我們拿實例說話。最近半年一直在參與企業(yè)QQ賬戶中心改版的項目，你可以看成是企業(yè)后臺管理系統(tǒng)。這里有幾個關鍵字，一是企業(yè)，二是管理系統(tǒng)。

1. 企業(yè)

這里為什么要強調(diào)是“企業(yè)”呢？因為企業(yè)產(chǎn)品的用戶一般都是購買了企業(yè)QQ產(chǎn)品的企業(yè)的員工，有一定IT技能的人。因此，用戶的瀏覽器的現(xiàn)代感就比Qzone用戶強不少。下圖為同事在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)品其實可以作為現(xiàn)代web技術的試驗田，在為用戶提供更好體驗更高質(zhì)量產(chǎn)品的同時，為日后其他產(chǎn)品的現(xiàn)代化改造提供了寶貴的借鑒經(jīng)驗。而本文的內(nèi)滾動布局，就是萬千經(jīng)驗中的一小個。

2. 管理系統(tǒng)

“管理系統(tǒng)”意味著站點以強交互為主，會有很多類似辦公軟件的交互操作在里面。如果是更偏重瀏覽的站點，例如企業(yè)QQ官網(wǎng)，顯然，傳統(tǒng)的垂直瀑布式的網(wǎng)站是更適合的，滾動瀏覽，再滾動，再瀏覽。但是，企業(yè)管理系統(tǒng)如此龐大，操作如此頻繁，交互如此之多，傳統(tǒng)的上下式網(wǎng)站顯然很難讓用戶用得非常得心應手。下圖為以前企業(yè)QQ賬戶中心組織結構頁面（測試頁面）的真容：

看著此頁面，立馬讓我想起了6年前剛畢業(yè)那會的青蔥歲月，那時候的頁面的基本上就是這樣的調(diào)調(diào)，小小的空間里有著小小的世界。時代發(fā)展，再輝煌的過去，如果沒有改變，終將會被埋汰。

正是由于以上兩點，設計師設計的時候，大膽創(chuàng)新，設計成了全屏自適應、半響應、類PC軟件風格(內(nèi)滾動)的管理站點，下圖為上面老頁面同樣數(shù)據(jù)的新測試頁面截圖：

回到內(nèi)滾動布局本身。

新版企業(yè)賬戶中心全站，頂部以及左側(cè)固定，不跟隨滾動，右側(cè)主體內(nèi)滾動，如何實現(xiàn)呢？

由于企業(yè)產(chǎn)品不用管0.4%的IE6用戶，因此，事件就變得簡單地多了。我們可以利用絕對定位元素的拉伸特性，使內(nèi)滾動容器高度自適應匹配。HTML主結構示意如下：

body
 -- page
    -- header
    -- side
    -- content

其中page扮演傳統(tǒng)頁面<body>的角色。這是一個預留設計，防止為了滿足某些功能或交互體驗需要，一個頁面同時出現(xiàn)多個類似結構頁面的情況?；蛘哌@么說吧，把所有頁面內(nèi)容放在一個page中，此時page就好比一個可以移動的房子，回頭你跳槽來騰訊了，房子可以一起帶過來，原來的位置可以被其他房子代替。但是，你如果直接放在<body>中，由于<body>只能是一個，不動產(chǎn)，此時想要做整體遷移，難度就較大，同時項目幾乎成型，全局修改成本高高風險大。不過凡事都有兩面性，這樣的折騰可以減少你白頭發(fā)的數(shù)目，因為你會因操勞過度頭發(fā)直接脫掉的。

page相關CSS如下：

.page { position: absolute; top: 0; right: 0; bottom: 0; left: 0; }

應該很好理解，絕對定位，滿屏拉伸，等同于：

.page { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

由于省了好幾個字節(jié)，所以我舍棄了IE6使用了上面寫法。

對于固定的頭部header或者固定的側(cè)邊side, 你可以使用語義明確的position:fixed定位，或者直接使用position:absolute，因為滾動容器跟他們平級，所以，absolute其實就是fixed效果。

講到這里就不得不說點題外話，很多人會遇到移動端position:fixed的底部輸入框定位的頭疼問題，如何解決？就是使用本文介紹的內(nèi)滾動布局，然后底部使用position:absolute模擬fixed效果。淺議內(nèi)滾動布局

代碼方面，同樣就是拉伸拉伸：

.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里面玩耍。于是，一個高寬均自適應瀏覽器窗體的內(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)站頭部的高度考慮進去（傳統(tǒng)窗體滾動不需要，因為值是0）：

var maxScrollTop = $("#tableHeader").offset().top - $(".header").height();

以上這個，我們可以稱之為“變化”，與原本的實現(xiàn)相比無功無過，一種變化一種轉(zhuǎn)移。實際上，內(nèi)滾動布局還會帶來帶有質(zhì)變性質(zhì)的一些特性。

無法滾動的彈出層

基本上，是個像樣的web2.0網(wǎng)站都會有彈框web組件，一個黑色半透明的overlay層，上面搖曳著彈框面板，例如這樣的：

對于黑色半透明覆蓋層，傳統(tǒng)實現(xiàn)是這樣的：如果要兼容IE6瀏覽器，一般是absolute絕對定位，高度由JS計算賦予；如果不需要管IE6, 則可以使用fixed固定定位。

然而，在內(nèi)滾動布局下，“賞”就出來了，就算需要兼容IE6瀏覽器，黑色半透明高寬100%自適應覆蓋也不需要任何JS計算的幫助，也不需要監(jiān)聽window的resize事件，直接CSS就可以搞定。很簡單：

.overlay { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }

為啥一行CSS就能搞定所有場景？因為使用的是內(nèi)滾動布局，如下圖示意，屏幕就這么高，滾動在里面，自然自適應：

看上去是內(nèi)滾動布局帶來的一個小小的“賞”，但是，實際上，埋下了一個不小的“罰”。

隨意改變滾動容器大的問題在于，當存在覆蓋層的時候，會影響背后頁面內(nèi)容的滾動。

100%尺寸的position:absolute/fixed的覆蓋層，會覆蓋任何非<html>元素(包括<body>)(包括這些元素的滾動條)，因此，只要覆蓋+滾動容器改變，頁面就無法滾動。

內(nèi)滾動布局是典型的改變?yōu)g覽器默認滾動容器的布局，自然覆蓋層一出現(xiàn)，就沒法滾動。不過這也沒什么，對吧，彈框出現(xiàn)時候，頁面背景沒法滾也挺好的。

但是，麻煩的事情是，如果彈框自身高度很高，卻又沒法滾動呢(瀏覽器可用高度700像素，彈框有900像素高)？

傳統(tǒng)布局下的彈框，如果高度很高，直接設置彈框容器position:absolute就可以愉快地上下翻滾了。但是，在內(nèi)滾動布局下，彈框根本就不在滾動容器里面，翻滾一說從何談起？

大危機！怎么辦??？淺議內(nèi)滾動布局

我們新版企業(yè)賬戶中心就遇到這個問題，我是這么解決的——overlay和dialog合體。

合體與滾動

合體是什么意思呢？基本上，90%+的彈框組件，半透明覆蓋層overlay和彈框dialog是兩個并列的兄弟關系的獨立的元素，這種設計的好處在于overlay組件可以復用。實際上，我們要實現(xiàn)一個彈框效果，只要一層div標簽就可以了，核心就是使用兼容的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結構示意如下：

<div class="container">
    <dialog></dialog>
</div>

此時，彈框在一個可滾動的容器之中，媽媽再也不用擔心我不能愉快地翻滾了！

五、結束語

由于傳統(tǒng)窗體滾動已經(jīng)深入人心，所以我們可能會覺得內(nèi)滾動布局似乎有些坑；但是，如果當年是內(nèi)滾動布局天下，我們又該如何看待新興的窗體滾動布局呢？然后，從產(chǎn)品的角度講，內(nèi)滾動布局在操作如此頻繁的重交互項目中所帶來的交互體驗上的改進，要遠比經(jīng)驗不足帶來的額外開發(fā)成本要大很多很多。

我相信，這種交互形式以及web布局上的創(chuàng)新一定會帶來很多正面的反饋和積極的影響，產(chǎn)品即將上線，我們可以拭目以待。

內(nèi)滾動布局，更現(xiàn)代，更移動，如果您的項目合適，不妨也試試這種看似新穎的布局方式。

網(wǎng)站欄目：淺議內(nèi)滾動布局
URL標題：http://www.bm7419.com/news29/162379.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供關鍵詞優(yōu)化、建站公司、網(wǎng)站收錄、面包屑導航、網(wǎng)站維護、網(wǎng)站建設

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源：創(chuàng)新互聯(lián)