移動端實現(xiàn)內(nèi)滾動的4種方案

CodeSheep 發(fā)布于2019-08-30 13:13 / 2079人閱讀

摘要：部分區(qū)域固定其余區(qū)域滾動部分區(qū)域固定為頁面的部分設(shè)置以及，即禁用頁面原生的滾動，保證只會顯示一屏的內(nèi)容。但是單位對低版本安卓和支持不夠好，微信瀏覽器內(nèi)核不支持，雖然已經(jīng)升級到內(nèi)核，但是為了確保萬無一失，放棄采用這種方案。

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

作者：Icarus
原文鏈接：http://xdlrt.github.io/2016/1...

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

部分區(qū)域固定

其余區(qū)域滾動

部分區(qū)域固定

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

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

其余區(qū)域滾動 核心屬性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屬性指定或是裁剪內(nèi)容并且渲染一個滾動條，或是當(dāng)塊級元素在其頂部或底部溢出時顯示溢出的內(nèi)容。

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

舉個例子：

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

    這里面只是一段測試的內(nèi)容這里面只是一段測試的內(nèi)容這里面只是一段測試的內(nèi)容
    這里面只是一段測試的內(nèi)容這里面只是一段測試的內(nèi)容這里面只是一段測試的內(nèi)容
    這里面只是一段測試的內(nèi)容這里面只是一段測試的內(nèi)容這里面只是一段測試的內(nèi)容
    這里面只是一段測試的內(nèi)容這里面只是一段測試的內(nèi)容這里面只是一段測試的內(nèi)容

效果如下：

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

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

方案說明

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

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

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

height百分比

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

calc

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

可惜的是對于低版本的安卓瀏覽器、ios瀏覽器包括微信瀏覽器在內(nèi)的主流瀏覽器支持都不好，依然只能棄用。
如果兼容性再好一點的話，calc方案應(yīng)該是最好用且最優(yōu)雅的一種實現(xiàn)方式。

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

題外話 隱藏難看的滾動條。

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

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

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

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

::-webkit-scrollbar{
    display: none
}

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

-webkit-overflow-scrolling: touch

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

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

GPU云服務(wù)器云服務(wù)器 js移動端向上滾動刷新數(shù)據(jù) 移動端適配方案 webrtc 移動端實現(xiàn) 兼容支持webrtc的移動端

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/115388.html

發(fā)表評論

登陸后可評論

0條評論

CodeSheep

男|高級講師

我要關(guān)注我要私信

TA的文章

CMIVPS：香港VPS，終身月付8折年付7折，香港大帶寬/直連線路月付5.6美元起

閱讀 993·2021-11-04 16:08
hostdare，美國CN2 GIA VPS 9折+CN2 GT系列6.5折促銷，$45/年，1核/

閱讀 2972·2021-09-13 10:37
css 【實用】

閱讀 506·2019-08-30 15:56
前端面試問題匯總

閱讀 1957·2019-08-30 15:55
<div>居中問題總結(jié)

閱讀 2237·2019-08-30 15:53
移動端實現(xiàn)內(nèi)滾動的4種方案

閱讀 2080·2019-08-30 13:13
談?wù)凚FC與ie特有屬性hasLayout

閱讀 2921·2019-08-30 12:51
響應(yīng)式導(dǎo)航菜單（css+js）

閱讀 1540·2019-08-29 16:06

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

移動端實現(xiàn)內(nèi)滾動的4種方案

相關(guān)文章