js移動端滑倒頂部加載歷史消息解決方案!

jackwang 發布于2019-08-22 16:13 / 1945人閱讀

摘要：使用具有回彈效果的滾動當手指從觸摸屏上移開，內容會繼續保持一段時間的滾動效果。繼續滾動的速度和持續的時間和滾動手勢的強烈程度成正比。

最近做了一個語音直播聊天的項目，有一個功能是當沒有直播時，進入房間可以查看歷史消息，滑動到頂部加載之前的歷史消息，我用jquery scroll事件，來判斷是否滾動到頂部，問題來了：

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

我設置一個全局變量，用來保存父元素的高度，先記錄prepend之前父元素的高度，再用prepend之后的高度減去之前的高度，這就是我想要的滾動位置，然后用animate 滾動到這里（時間盡量設置短一點，負責頁面抖動厲害）：

然而ios瀏覽器滑動時會有卡頓現象，百度了下，此屬性可解決ios滑動卡頓現象，

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

加上此屬性之后，在蘋果手機里面設置scrollTop總是失敗，在我查看了很多文章之后，發現設置
-webkit-overflow-scrolling:touch對scrollTop有影響，具體原因，還有待研究。。。。

在我測試之后發現設置-webkit-overflow-scrolling:auto 對于scrollTop沒有影響，

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

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

GPU云服務器云服務器 js 還原頂部 js頁面頂部 js鼠標返回頂部 js 浮動回到頂部

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/94150.html

js移動端滑倒頂部加載歷史消息解決方案!

摘要：使用具有回彈效果的滾動當手指從觸摸屏上移開，內容會繼續保持一段時間的滾動效果。繼續滾動的速度和持續的時間和滾動手勢的強烈程度成正比。最近做了一個語音直播聊天的項目，有一個功能是當沒有直播時，進入房間可以查看歷史消息，滑動到頂部加載之前的歷史消息，我用jquery scroll事件，來判斷是否滾動到頂部，問題來了：首先觸發請求事件之后，prepend插入到當前列表之前，而prepen...

mingde 2019-08-02 10:09 評論0 收藏0
js移動端滑倒頂部加載歷史消息解決方案!

摘要：使用具有回彈效果的滾動當手指從觸摸屏上移開，內容會繼續保持一段時間的滾動效果。繼續滾動的速度和持續的時間和滾動手勢的強烈程度成正比。最近做了一個語音直播聊天的項目，有一個功能是當沒有直播時，進入房間可以查看歷史消息，滑動到頂部加載之前的歷史消息，我用jquery scroll事件，來判斷是否滾動到頂部，問題來了：首先觸發請求事件之后，prepend插入到當前列表之前，而prepen...

leejan97 2019-08-30 15:53 評論0 收藏0
分享一個移動端滑到底部翻頁的代碼

摘要：如果有其他需求，比如返回例子中直接返回，可以修改中的代碼，就不贅述了今天在技術群看到有朋友有需求，就隨手寫了一個，大家隨便看看~demo地址：http://www.dtzhuanjia.com/pri...（備注：這個主要用在移動端，所以用rem隨便寫了寫樣式= =PC看著不舒服用模擬器看吧） html: 下一頁 ...

heartFollower 2019-08-21 11:25 評論0 收藏0
分享一個移動端滑到底部翻頁的代碼

摘要：如果有其他需求，比如返回例子中直接返回，可以修改中的代碼，就不贅述了今天在技術群看到有朋友有需求，就隨手寫了一個，大家隨便看看~demo地址：http://www.dtzhuanjia.com/pri...（備注：這個主要用在移動端，所以用rem隨便寫了寫樣式= =PC看著不舒服用模擬器看吧） html: 下一頁 ...

hzc 2019-08-30 13:17 評論0 收藏0
分享一個移動端滑到底部翻頁的代碼

摘要：如果有其他需求，比如返回例子中直接返回，可以修改中的代碼，就不贅述了今天在技術群看到有朋友有需求，就隨手寫了一個，大家隨便看看~demo地址：http://www.dtzhuanjia.com/pri...（備注：這個主要用在移動端，所以用rem隨便寫了寫樣式= =PC看著不舒服用模擬器看吧） html: 下一頁 ...

kumfo 2019-08-01 16:09 評論0 收藏0