js移動(dòng)端滑倒頂部加載歷史消息解決方案!

jackwang 發(fā)布于2019-08-22 16:13 / 1953人閱讀

摘要：使用具有回彈效果的滾動(dòng)當(dāng)手指從觸摸屏上移開，內(nèi)容會(huì)繼續(xù)保持一段時(shí)間的滾動(dòng)效果。繼續(xù)滾動(dòng)的速度和持續(xù)的時(shí)間和滾動(dòng)手勢(shì)的強(qiáng)烈程度成正比。

最近做了一個(gè)語(yǔ)音直播聊天的項(xiàng)目，有一個(gè)功能是當(dāng)沒有直播時(shí)，進(jìn)入房間可以查看歷史消息，滑動(dòng)到頂部加載之前的歷史消息，我用jquery scroll事件，來判斷是否滾動(dòng)到頂部，問題來了：

首先觸發(fā)請(qǐng)求事件之后，prepend插入到當(dāng)前列表之前，而prepend元素會(huì)使scoll滾動(dòng)到頂部，
顯然這不是我想要的效果，我所要效果可以跟微信加載歷史消息一樣直接停留在上一頁(yè)底部，

我設(shè)置一個(gè)全局變量，用來保存父元素的高度，先記錄prepend之前父元素的高度，再用prepend之后的高度減去之前的高度，這就是我想要的滾動(dòng)位置，然后用animate 滾動(dòng)到這里（時(shí)間盡量設(shè)置短一點(diǎn)，負(fù)責(zé)頁(yè)面抖動(dòng)厲害）：

然而ios瀏覽器滑動(dòng)時(shí)會(huì)有卡頓現(xiàn)象，百度了下，此屬性可解決ios滑動(dòng)卡頓現(xiàn)象，

-webkit-overflow-scrolling 屬性控制元素在移動(dòng)設(shè)備上是否使用滾動(dòng)回彈效果.
auto: 使用普通滾動(dòng), 當(dāng)手指從觸摸屏上移開，滾動(dòng)會(huì)立即停止。
touch: 使用具有回彈效果的滾動(dòng), 當(dāng)手指從觸摸屏上移開，內(nèi)容會(huì)繼續(xù)保持一段時(shí)間的滾動(dòng)效果。
繼續(xù)滾動(dòng)的速度和持續(xù)的時(shí)間和滾動(dòng)手勢(shì)的強(qiáng)烈程度成正比。同時(shí)也會(huì)創(chuàng)建一個(gè)新的堆棧上下文。

加上此屬性之后，在蘋果手機(jī)里面設(shè)置scrollTop總是失敗，在我查看了很多文章之后，發(fā)現(xiàn)設(shè)置
-webkit-overflow-scrolling:touch對(duì)scrollTop有影響，具體原因，還有待研究。。。。

在我測(cè)試之后發(fā)現(xiàn)設(shè)置-webkit-overflow-scrolling:auto 對(duì)于scrollTop沒有影響，

在我設(shè)置scrollTop之前先把-webkit-overflow-scrolling設(shè)置為auto,
設(shè)置完之后-webkit-overflow-scrolling設(shè)置為touch

希望大神有更好的解決方案多多指教，瀏覽器兼容著實(shí)是心累的不行.....