国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

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

jackwang / 1945人閱讀

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

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

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

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

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

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

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

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

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

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

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

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

相關文章

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

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

    mingde 評論0 收藏0
  • js移動滑倒頂部加載歷史消息解決方案!

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

    leejan97 評論0 收藏0
  • 分享一個移動端滑到底部翻頁的代碼

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

    heartFollower 評論0 收藏0
  • 分享一個移動端滑到底部翻頁的代碼

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

    hzc 評論0 收藏0
  • 分享一個移動端滑到底部翻頁的代碼

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

    kumfo 評論0 收藏0

發表評論

0條評論

最新活動
閱讀需要支付1元查看
<