移動web之滾動知識篇

創(chuàng)新互聯(lián)編者為大家整理了手機WAP網(wǎng)站知識——《移動web之滾動知識篇》

知識點1:移動web滾動問題

在移動端，使用滾動來處理業(yè)務邏輯的情況有很多，例如列表的滾動加載數(shù)據(jù)，下拉刷新等等都需要利用滾動的相關(guān)知識，但是滾動事件在不同的移動端機型卻又有不同的表現(xiàn)，下面就來一一總結(jié)一下。

滾動事件：即onscroll事件，形成原因通俗解釋是當子元素的高度超過父元素的高度時且父元素的高度時定值window除外，就會形成滾動條，滾動分為兩種：局部滾動和body滾動。

onscroll方法： 一般情況下當我們需要監(jiān)聽一個滾動事件時通常會用到onscroll方法來監(jiān)聽滾動事件的觸發(fā)。 如果在瀏覽器上調(diào)試這個方法在瀏覽器上很好用，但是如果跑在手機端就沒有想象中的效果了。

body滾動：在移動端如果使用body滾動，意思就是頁面的高度由內(nèi)容自動撐大，body自然形成滾動條，這時我們監(jiān)聽window.onscroll，發(fā)現(xiàn)onscroll并沒有實時觸發(fā)，只在手指觸摸的屏幕上一直滑動時和滾動停止的那一刻才觸發(fā),采用了wk內(nèi)核的webview除外。

body滾動
局部滾動

局部滾動：在移動端如果使用局部滾動，意思就是我們的滾動在一個固定寬高的div內(nèi)觸發(fā)，將該div設(shè)置成overflow:scroll/auto;來形成div內(nèi)部的滾動，這時我們監(jiān)聽div的onscroll發(fā)現(xiàn)觸發(fā)的時機區(qū)分android和ios兩種情況，具體可以看下面表格：

不同機型onscroll事件觸發(fā)情況：

	body滾動	局部滾動
ios	不能實時觸發(fā)	不能實時觸發(fā)
android	實時觸發(fā)	實時觸發(fā)
ioswkwebview內(nèi)核	實時觸發(fā)	實時觸發(fā)

wkwebview內(nèi)核:這里說明一下關(guān)于ios的wkwebview內(nèi)核是ios從ios8開始提供的新型webview內(nèi)核，和之前的uiwebview相比，性能要好，具體大家可以自行查看關(guān)于wkwebview的相關(guān)概念。

body滾動和局部滾動demo：這里我需要指出的是在采用wkwebview內(nèi)核的頁面中scroll是可以實時觸發(fā)的，如果使用的是原本的uiwebview則不能夠?qū)崟r觸發(fā)，手q目前使用的是uiwebview而新版微信使用的是wkwebview，大家可以分別使用來嘗試一下下面的demo：

局部滾動
body滾動

分別用ios手q和微信和android手q體驗會有不同的結(jié)果。

知識點2:關(guān)于模擬滾動

正常的滾動：我們平時使用的scroll，包括上面講的滾動都屬于正常滾動，利用瀏覽器自身提供的滾動條來實現(xiàn)滾動，底層是由瀏覽器內(nèi)核控制。

模擬滾動：最典型的例子就是iscroll(AlloyTouch)了，原理一般有兩種：

1). 監(jiān)聽滾動元素的touchmove事件，當事件觸發(fā)時修改元素的transform屬性來實現(xiàn)元素的位移，讓手指離開時觸發(fā)touchend事件，然后采用requestanimationframe來在一個線型函數(shù)下不斷的修改元素的transform來實現(xiàn)手指離開時的一段慣性滾動距離。

2).監(jiān)聽滾動元素的touchmove事件，當事件觸發(fā)時修改元素的transform屬性來實現(xiàn)元素的位移，讓手指離開時觸發(fā)touchend事件，然后給元素一個css的animation，并設(shè)置好duration和function來實現(xiàn)手指離開時的一段慣性距離。

方案區(qū)別：這兩種方案對比起來各有好處，第一種方案由于慣性滾動的時機時由js自己控制所以可以拿到滾動觸發(fā)階段的scrolltop值，并且滾動的回調(diào)函數(shù)onscroll在滾動的階段都會觸發(fā)。

第二種方案相比第一種要劣勢一些，區(qū)別在于手指離開時，采用的時css的animation來實現(xiàn)慣性滾動，所以無法直接觸發(fā)慣性滾動過程中的onscroll事件，只有在animation結(jié)束時才可以借助animationend來獲取到事件，當然也有一種方法可以實時獲取滾動事件，也是借助于requestanimationframe來不斷的去讀取滾動元素的transform來拿到scrolltop同時觸發(fā)onscroll回調(diào)。

demo體驗：關(guān)于模擬滾動和正常滾動，兩者在性能上差別還是比較明顯的，下面時兩個demo，可以掃描體驗一下：

正常滾動模擬滾動

衡量指標：衡量滾動是否流暢的指標fps，我這邊也統(tǒng)計了一下正常滾動和模擬滾動的fps數(shù)據(jù)：

正常滾動

模擬滾動

結(jié)論： 模擬滾動的fps值波動較大，這樣滾動起來會有明顯的卡頓感覺，各位體驗的時候如果滾動超過10屏之后就可以明顯感覺到兩著的區(qū)別。

在使用模擬滾動時，瀏覽器在js層面會消耗更多的性能去改變dom元素的位置，在dom復雜層級深的頁面更為高，所以在長列表滾動時還要使用正常滾動更好。

知識點3:滾動和下拉刷新

下拉刷新的元素在頁面頂部，正常瀏覽時不可見的。

當在頁面頂部往下滾動時出現(xiàn)下拉刷新元素，當手指離開時收起。

以上兩點時實現(xiàn)一個下拉刷新組件的基本步驟，結(jié)合我們上述關(guān)于滾動的描述，我們可以這樣實現(xiàn)下拉刷新：

方案1：借助iscroll的原理，整個頁面使用模擬滾動，將下拉刷新元素放在頂部，當頁面滾動到頂部下拉時，下拉刷新元素隨著頁面的滾動出現(xiàn)，當手指離開時收回，此方案實現(xiàn)起來較為簡單直接借助iscoll即可，但是使用了模擬滾動之后在正常的列表滾動時性能上不如正常滾動。

方案2：頁面使用正常滾動，將下拉刷新元素放置在頂部top值為負值(正常情況下不可見)，當頁面處于頂部時下拉，這時監(jiān)聽touchmove事件，修改scrollcontent的tranlateY值，同時修改下拉刷新元素的tranlateY值，將兩者同時位移來將下拉刷新元素顯示出來，手指離開時(touchend)收回，這種方案滿足了在正常列表滾動時使用原生的滾動節(jié)省性能，只在下拉刷新時使用模擬滾動來實現(xiàn)效果。

方案3：方案2的改良版，唯一不同是將下拉刷新元素和scrollcontent放在一個div里，將下拉刷新元素的margintop設(shè)為負值，在下拉刷新時，只需要修改scrollcontent一個元素的tranlateY值即可實現(xiàn)下拉，在性能上要比方案2好。

性能問題：在采用了上述方案之后，還會有一個性能上的問題就是：當頁面的列表過長，dom元素過多時，在模擬滾動，下拉刷新這段時間內(nèi)，頁面也會有卡頓現(xiàn)象，這里采取了一個

優(yōu)化策略：

1) 列表較長時dom數(shù)量較多時，在觸發(fā)下拉刷新的時機時將頁面視窗之外的dom元素隱藏或者存放在fragment里面。

2) 在刷新完成之后手指離開(touchend)時將隱藏的元素顯示出來。

3) 需要注意的是，隱藏和顯示視窗外的元素這個操作在下拉刷新時只會執(zhí)行一次，并且只有在下拉刷新時才會執(zhí)行。

AlloyPullRefresh(基于上述知識點開發(fā)的組件)

• 定義下拉刷新元素樣式
• 下拉刷新事件回調(diào)
• 支持zepto版本和react版本

網(wǎng)站題目：移動web之滾動知識篇
當前網(wǎng)址：http://www.muchs.cn/news4/167404.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供App設(shè)計、網(wǎng)站導航、商城網(wǎng)站、手機網(wǎng)站建設(shè)、軟件開發(fā)、外貿(mào)建站

廣告

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