javascript - 聊天会话框，图片加载如何保持滚动条位置？

问题描述

问 题

最近在做一个聊天会话框，我可以得到数据列表，包括文本，图片和声音，最多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);
      }
    });
  }

解决方案

可以实现的，以前开发有遇到类似的问题，下面是最简单最快捷的方案，可供参考一下：

先假设HTML是这样的：

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

先监听图片的onload事件，然后图片加载完成就马上设置滚动条到最底部：

$('.img').on('load', function() { // 图片已加载完成
    $('.father').scrollTop(9999); // 滚动到最底部
});

这里scrollTop()写大一点也没关系：如果元素的scrollTop超过或是等于元素内容的总高度，都会滚动到底部的。
所以只要保证scrollTop能比这20条信息的总高度都要高，这样就肯定能滚动到你父元素的底部啦。

哈哈，原理就这么简单。希望对你有帮助。

这篇关于javascript - 聊天会话框，图片加载如何保持滚动条位置？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！