移動端實現內滾動的4種方案

Icarus發表於2016-12-02

如果在一個區域內只允許部分割槽域產生滾動的效果，而其餘部分不能移動，你會採用什麼方法呢？

作者：Icarus
原文連結：xdlrt.github.io/2016/12/02/…

首先我們可以把這個需求分解為兩個小的問題來解決。

  • 部分割槽域固定
  • 其餘區域滾動

部分割槽域固定

  1. 為頁面的body部分設定height: 100%以及overflow: hidden，即禁用頁面原生的滾動，保證只會顯示一屏的內容。
  2. 固定區域採用絕對定位。

其餘區域滾動

核心屬性overflow-y

mdn對於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屬性指定或是裁剪內容並且渲染一個滾動條，或是當塊級元素在其頂部或底部溢位時顯示溢位的內容。

簡單來說，overflow-y屬性在垂直方向上存在溢位的時候，通過設定不同的值會產生不同的表現。為了實現滾動功能我們需要將該屬性設定為scroll，之後，無論塊級元素的內容是否溢位，瀏覽器都會生成一個滾動條並且隱藏容器中內容溢位的部分，只有在滾動之後才會顯示。

舉個例子：

.test{
    width: 200px;
    /* 關鍵樣式 */
    height: 200px;
    overflow-y: scroll;
    /* 以下無關樣式 */
    background: #f14c5c;
    color: #fff;
}
<div class="test">
    這裡面只是一段測試的內容這裡面只是一段測試的內容這裡面只是一段測試的內容
    這裡面只是一段測試的內容這裡面只是一段測試的內容這裡面只是一段測試的內容
    這裡面只是一段測試的內容這裡面只是一段測試的內容這裡面只是一段測試的內容
    這裡面只是一段測試的內容這裡面只是一段測試的內容這裡面只是一段測試的內容
</div>複製程式碼

效果如下：


這裡面只是一段測試的內容這裡面只是一段測試的內容這裡面只是一段測試的內容這裡面只是一段測試的內容這裡面只是一段測試的內容這裡面只是一段測試的內容這裡面只是一段測試的內容這裡面只是一段測試的內容這裡面只是一段測試的內容這裡面只是一段測試的內容這裡面只是一段測試的內容這裡面只是一段測試的內容

通過剛才的例子我們可以得出結論，只要限制塊級元素的高度，自然就可以實現只有該元素的內容可滾動而不影響其它內容。但是在實現過程中遇到了新的問題，如何實現對設計圖的精確還原？設計圖如下：

移動端實現內滾動的4種方案

整個彈出框高度是隨頁面高度自適應的，標題部分和底部按鈕部分位置是固定的，中間列表需要佔滿剩餘高度，並且內容可滾動。整個彈窗被最外層div包裹，底部按鈕相對於它進行定位。經過思考後，嘗試了四種方案，分享給大家。

方案說明

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

vh

相對於視口的高度，視口被均分為100單位，即1vh等於視口高度的1%。

移動端實現內滾動的4種方案

但是vh單位對低版本安卓和ios支援不夠好，微信瀏覽器X5核心不支援，雖然已經升級到blink核心，但是為了確保萬無一失，放棄採用這種方案。另外也無法精確控制和底部按鈕邊距。

height百分比

和vh類似，無法精確控制和底部按鈕的邊距，自適應效果不好。

calc

對於以上兩種方案的存在的問題，calc計算屬性可以很好的解決，只需要設定height:calc(100% - 60px)，就可以精準的佔滿中間部分，並且保持和底部按鈕的邊距。

移動端實現內滾動的4種方案

可惜的是對於低版本的安卓瀏覽器、ios瀏覽器包括微信瀏覽器在內的主流瀏覽器支援都不好，依然只能棄用。
如果相容性再好一點的話，calc方案應該是最好用且最優雅的一種實現方式。

js

單純的使用css無法實現，就只能藉助js來動態計算內容所需要的高度來進行設定。同時這種方法也幾乎不會遇到相容性的問題，是對優雅降級的一種實踐。

題外話

隱藏難看的滾動條。

移動端實現內滾動的4種方案

如果直接設定overflow-y:scroll在ios下始終會出現很醜的滾動條，我們可以對該元素設定以下屬性：

margin-right: -20px;
padding-right: 20px;複製程式碼

對滾動條進行一個小小的hack，它就再也不會出現了，使用者互動時會有和原生滾動一樣的感覺，體驗更佳。

@prototype 經大大提醒，設定webkit瀏覽器的私有屬性::-webkit-scrollbar能更靈活的控制滾動條，在此感謝。如果只需要隱藏，如下程式碼即可：

::-webkit-scrollbar{
    display: none
}複製程式碼

雖然移動端的瀏覽器webkit核心居多，不過還是要在真機測試後再得出結論，如果有些瀏覽器不支援這個屬性的話，依然可以使用上面的小hack。

-webkit-overflow-scrolling: touch

在ios裝置中，利用overflow來模擬滾動會出現卡頓的情況，可以通過設定-webkit-overflow-scrolling: touch來解決，原因是設定後ios會為其建立一個UIScrollView，利用硬體來加速渲染。

這個問題本身並不複雜，甚至需求更改後，實現變的非常簡單。但是希望能通過這個小例子能讓每一個前端人在思考需求時都能夠儘可能的去想更多樣的方法來解決問題，即使因為相容性或其它原因暫時無法實現，在這個過程中獲得的成長也是非常有益的。

相關文章