首先說一下結(jié)論，iOS UC QQ瀏覽器（應(yīng)該都是uiwebview）舔腾，scroll事件是無法實(shí)時(shí)監(jiān)聽的。同時(shí)會(huì)對js的執(zhí)行也有不同的影響衔蹲。
頁面級的滾動(dòng)（正常文檔流，頁面高度大于屏幕高度）
在滾動(dòng)時(shí)會(huì)阻塞所有js腳本，可以查看這個(gè)簡單的demo扼仲。
頁面上每隔一秒刷新一次時(shí)間倡怎，為排除滾動(dòng)時(shí)可能只是阻塞了部分的渲染，每秒還向服務(wù)器發(fā)送一次請求暑塑，觀察服務(wù)器的log（這個(gè)就沒法演示了）。
可見無論是慣性滾動(dòng)劫瞳，還是手不離開屏幕拖動(dòng)，時(shí)間都無法刷新钥组，服務(wù)器也無法收到請求郎逃，只有touchmove的回調(diào)在走褒翰。DOM級別的滾動(dòng)
DOM定高，overflow:scroll伦吠，demo地址。
DOM滾動(dòng)時(shí)衡怀，不會(huì)阻塞js執(zhí)行，頁面時(shí)間正常刷新玉罐，服務(wù)器正常接收請求扭屁。
但是無法解決的問題仍是：scroll時(shí)間無法實(shí)時(shí)監(jiān)聽。
解決方案：
非要解決的話觉义，就使用iScroll之類的庫模擬滾動(dòng)雁社。
------------------------------分割線，以下是以前記錄的晒骇，懶得刪了------------------------------
老樣子霉撵，首先交代背景
需要在滑動(dòng)時(shí)候，即將出現(xiàn)的card洪囤，做一個(gè)拉桿效果徒坡，就是讓他像被緩慢的拉出一樣
原理其實(shí)很簡單，給下面被蓋住的元素一個(gè)y方向的translate瘤缩，初始為負(fù)值讓其被蓋住喇完，隨著頁面滑動(dòng)逐漸把負(fù)值置零。
在Safari剥啤、Chrome锦溪、UC下都表現(xiàn)良好不脯。但是在UIWebView中，滑動(dòng)停止前刻诊，都不會(huì)觸發(fā)scroll事件防楷。例如下面的代碼：
window.addEventListener('scroll' , function(){
// do something
});
即，
如果你是緩慢滑動(dòng)则涯，松手前域帐，scroll事件不會(huì)觸發(fā)。
如果你是快速滑動(dòng)是整，松手后頁面靠慣性滑動(dòng)肖揣，滑動(dòng)停止前，scroll事件不會(huì)觸發(fā)浮入。
究其根本原因：
UIWebView在進(jìn)行momentum scrolling(彈性滾動(dòng))時(shí),會(huì)停止所有的 事件響應(yīng) 及 DOM操作引起的頁面渲染龙优，故 onscroll 不能實(shí)時(shí)響應(yīng)。
這里不得不提到一個(gè)屬性 -webkit-overflow-scrolling
如果你對某個(gè)div或模塊使用了overflow: scroll屬性事秀，在iOS系統(tǒng)的手機(jī)上瀏覽時(shí)彤断，則會(huì)出現(xiàn)明顯的卡頓現(xiàn)象。但是在android系統(tǒng)的手機(jī)上則不會(huì)出現(xiàn)該問題易迹。
對于這個(gè)屬性宰衙，蘋果公司的解釋
- auto：就是普通的無慣性滾動(dòng)效果
- touch：原生的滾動(dòng)效果。使用此效果會(huì)構(gòu)造一個(gè) stacking context
什么是 stacking context睹欲？這可以說是CSS里一個(gè)陰暗面供炼，極其晦澀。有興趣的朋友可以去看高人的解釋窘疮。
去掉這個(gè)屬性袋哼，對解決不觸發(fā)scroll事件，毫無用處
結(jié)論來了
想徹底做出這個(gè)效果闸衫，有兩個(gè)選擇：
- 更換webview
- 用庫模擬滾動(dòng) iScroll之類的
為了效果好涛贯，還是早日更換webview吧。
