第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號(hào)安全,請(qǐng)及時(shí)綁定郵箱和手機(jī)立即綁定
已解決430363個(gè)問題,去搜搜看,總會(huì)有你想問的

聊天會(huì)話框,圖片加載如何保持滾動(dòng)條位置?

聊天會(huì)話框,圖片加載如何保持滾動(dòng)條位置?

最近在做一個(gè)聊天會(huì)話框,我可以得到數(shù)據(jù)列表,包括文本,圖片和聲音,最多20條。 我之前的方法是:首先,設(shè)置<img>的默認(rèn)src,height,width等屬性,以獲得父div的高度,因?yàn)闀?huì)話框一打開就必須滾動(dòng)到底部。當(dāng)我得到真正的圖片時(shí),改變src,height,width,現(xiàn)在用onload事件監(jiān)聽得到真實(shí)高度 realHeight,但是當(dāng)加載的消息記錄中有較多大圖片時(shí),頻繁地改變scrollTop,會(huì)引起明顯的窗口抖動(dòng)有人都有類似的經(jīng)驗(yàn)和解決方案? 謝謝,代碼如下 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){ //當(dāng)前窗口為空,滾動(dòng)到底部         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貢獻(xiàn)1845條經(jīng)驗(yàn) 獲得超8個(gè)贊

可以實(shí)現(xiàn)的,以前開發(fā)有遇到類似的問題,下面是最簡(jiǎn)單最快捷的方案,可供參考一下:

先假設(shè)HTML是這樣的:

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

先監(jiān)聽圖片的onload事件,然后圖片加載完成就馬上設(shè)置滾動(dòng)條到最底部:

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

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

哈哈,原理就這么簡(jiǎn)單。希望對(duì)你有幫助。


查看完整回答
反對(duì) 回復(fù) 2018-11-17
  • 1 回答
  • 0 關(guān)注
  • 826 瀏覽
慕課專欄
更多

添加回答

舉報(bào)

0/150
提交
取消
微信客服

購課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動(dòng)學(xué)習(xí)伙伴

公眾號(hào)

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號(hào)