亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

聊天會話框,圖片加載如何保持滾動條位置?

聊天會話框,圖片加載如何保持滾動條位置?

哆啦的時光機 2018-10-20 13:11:26
最近在做一個聊天會話框,我可以得到數據列表,包括文本,圖片和聲音,最多20條。 我之前的方法是:首先,設置<img>的默認src,height,width等屬性,以獲得父div的高度,因為會話框一打開就必須滾動到底部。當我得到真正的圖片時,改變src,height,width,現在用onload事件監聽得到真實高度 realHeight,但是當加載的消息記錄中有較多大圖片時,頻繁地改變scrollTop,會引起明顯的窗口抖動有人都有類似的經驗和解決方案? 謝謝,代碼如下 function ReplacePicture (imgid, url) {    var $img = $('#img-'+imgid).children();    var oldH = parseInt($img.css('height'));     $img.attr('oldHeight', oldH);     $img.attr('src', url);     $img.on('load', function() {      if(!currentPosElement){ //當前窗口為空,滾動到底部         sureToBottom();        } else {        var oldH = $(this).attr('oldHeight');        var newH = $(this).css('height').match(/\d+/g);               if (newH == oldH) return;         oldH = parseInt(oldH);         newH = parseInt(newH);        var changeH = newH - oldH;         $(document).scrollTop($(document).scrollTop() + changeH);         $(this).attr('oldHeight',newH);       }     });   }
查看完整描述

1 回答

?
精慕HU

TA貢獻1845條經驗 獲得超8個贊

可以實現的,以前開發有遇到類似的問題,下面是最簡單最快捷的方案,可供參考一下:

先假設HTML是這樣的:

<div class="father">
    <img class="img"></div>

先監聽圖片的onload事件,然后圖片加載完成就馬上設置滾動條到最底部:

$('.img').on('load', function() { // 圖片已加載完成
    $('.father').scrollTop(9999); // 滾動到最底部});

這里scrollTop()寫大一點也沒關系:如果元素的scrollTop超過或是等于元素內容的總高度,都會滾動到底部的。
所以只要保證scrollTop能比這20條信息的總高度都要高,這樣就肯定能滾動到你父元素的底部啦。

哈哈,原理就這么簡單。希望對你有幫助。


查看完整回答
反對 回復 2018-11-17
  • 1 回答
  • 0 關注
  • 834 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號