發(fā)現(xiàn)需求

　　如果在一個(gè)區(qū)域內(nèi)只允許部分區(qū)域產(chǎn)生滾動(dòng)的效果，而其余部分不能移動(dòng)，你會(huì)采用什么方法呢?

　　首先我們可以把這個(gè)需求分解為兩個(gè)小的問(wèn)題來(lái)解決。

　　部分區(qū)域固定

　　其余區(qū)域滾動(dòng)

部分區(qū)域固定

　　為頁(yè)面的body部分設(shè)置height: 100%以及overflow: hidden，即禁用頁(yè)面原生的滾動(dòng)，保證只會(huì)顯示一屏的內(nèi)容。

　　固定區(qū)域采用絕對(duì)定位。

其余區(qū)域滾動(dòng)

　　核心屬性overflow-y

　　mdn對(duì)于overflow-y的定義

　　The overflow-y property specifies whether to clip content, render a scroll bar, or display overflow content of a block-level element, when it overflows at the top and bottom edges.

　　overflow-y屬性指定或是裁剪內(nèi)容并且渲染一個(gè)滾動(dòng)條，或是當(dāng)塊級(jí)元素在其頂部或底部溢出時(shí)顯示溢出的內(nèi)容。

　　簡(jiǎn)單來(lái)說(shuō)，overflow-y屬性在垂直方向上存在溢出的時(shí)候，通過(guò)設(shè)置不同的值會(huì)產(chǎn)生不同的表現(xiàn)。為了實(shí)現(xiàn)滾動(dòng)功能我們需要將該屬性設(shè)置為scroll，之后，無(wú)論塊級(jí)元素的內(nèi)容是否溢出，瀏覽器都會(huì)生成一個(gè)滾動(dòng)條并且隱藏容器中內(nèi)容溢出的部分，只有在滾動(dòng)之后才會(huì)顯示。

舉個(gè)例子：

　　.test{ width: 200px; /* 關(guān)鍵樣式 */ height: 200px; overflow-y: scroll; /* 以下無(wú)關(guān)樣式 */ background: #f14c5c; color: #fff;}

效果圖如下：

　　通過(guò)剛才的例子我們可以得出結(jié)論，只要限制塊級(jí)元素的高度，自然就可以實(shí)現(xiàn)只有該元素的內(nèi)容可滾動(dòng)而不影響其它內(nèi)容。但是在實(shí)現(xiàn)過(guò)程中遇到了新的問(wèn)題，如何實(shí)現(xiàn)對(duì)設(shè)計(jì)圖的精確還原?

設(shè)計(jì)圖如下：

　　整個(gè)彈出框高度是隨頁(yè)面高度自適應(yīng)的，標(biāo)題部分和底部按鈕部分位置是固定的，中間列表需要占滿(mǎn)剩余高度，并且內(nèi)容可滾動(dòng)。整個(gè)彈窗被最外層div包裹，底部按鈕相對(duì)于它進(jìn)行定位。經(jīng)過(guò)思考后，嘗試了四種方案，分享給大家。

方案說(shuō)明

　　我們需要確定的核心問(wèn)題就是中間內(nèi)容的高度，也即是height在不同尺寸屏幕下的精確高度。

vh

　　相對(duì)于視口的高度，視口被均分為100單位，即1vh等于視口高度的1%。

　　但是vh單位對(duì)低版本安卓和iOS支持不夠好，微信瀏覽器X5內(nèi)核不支持，雖然已經(jīng)升級(jí)到blink內(nèi)核，但是為了確保萬(wàn)無(wú)一失，放棄采用這種方案。另外也無(wú)法精確控制和底部按鈕邊距。

height百分比

　　和vh類(lèi)似，無(wú)法精確控制和底部按鈕的邊距，自適應(yīng)效果不好。

calc

　　對(duì)于以上兩種方案的存在的問(wèn)題，calc計(jì)算屬性可以很好的解決，只需要設(shè)置height:calc(100% - 60px)，就可以精準(zhǔn)的占滿(mǎn)中間部分，并且保持和底部按鈕的邊距。

　　可惜的是對(duì)于低版本的安卓瀏覽器、ios瀏覽器包括微信瀏覽器在內(nèi)的主流瀏覽器支持都不好，依然只能棄用。

　　如果兼容性再好一點(diǎn)的話，calc方案應(yīng)該是最好用且最優(yōu)雅的一種實(shí)現(xiàn)方式。

js

　　單純的使用css無(wú)法實(shí)現(xiàn)，就只能借助js來(lái)動(dòng)態(tài)計(jì)算內(nèi)容所需要的高度來(lái)進(jìn)行設(shè)置。同時(shí)這種方法也幾乎不會(huì)遇到兼容性的問(wèn)題，是對(duì)優(yōu)雅降級(jí)的一種實(shí)踐。

題外話

　　隱藏難看的滾動(dòng)條。

　　如果直接設(shè)置overflow-y:scroll在ios下始終會(huì)出現(xiàn)很丑的滾動(dòng)條，我們可以對(duì)該元素設(shè)置以下屬性：

　　margin-right: -20px;padding-right: 20px;

　　對(duì)滾動(dòng)條進(jìn)行一個(gè)小小的hack，它就再也不會(huì)出現(xiàn)了，用戶(hù)交互時(shí)會(huì)有和原生滾動(dòng)一樣的感覺(jué)，體驗(yàn)更佳。

　　@prototype 經(jīng)大大提醒，設(shè)置webkit瀏覽器的私有屬性::-webkit-scrollbar能更靈活的控制滾動(dòng)條，在此感謝。如果只需要隱藏，如下代碼即可：

　　::-webkit-scrollbar{ display: none}

　　雖然移動(dòng)端的瀏覽器webkit內(nèi)核居多，不過(guò)還是要在真機(jī)測(cè)試后再得出結(jié)論，如果有些瀏覽器不支持這個(gè)屬性的話，依然可以使用上面的小hack。

-webkit-overflow-scrolling: touch

　　在ios設(shè)備中，利用overflow來(lái)模擬滾動(dòng)會(huì)出現(xiàn)卡頓的情況，可以通過(guò)設(shè)置-webkit-overflow-scrolling: touch來(lái)解決，原因是設(shè)置后ios會(huì)為其創(chuàng)建一個(gè)UIScrollView，利用硬件來(lái)加速渲染。

　　這個(gè)問(wèn)題本身并不復(fù)雜，甚至需求更改后，實(shí)現(xiàn)變的非常簡(jiǎn)單。但是希望能通過(guò)這個(gè)小例子能讓每一個(gè)前端人在思考需求時(shí)都能夠盡可能的去想更多樣的方法來(lái)解決問(wèn)題，即使因?yàn)榧嫒菪曰蚱渌驎簳r(shí)無(wú)法實(shí)現(xiàn)，在這個(gè)過(guò)程中獲得的成長(zhǎng)也是非常有益的。

總結(jié)

　　以上就是這篇文章的全部?jī)?nèi)容了，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來(lái)一定的幫助，如果有疑問(wèn)。