添加/删除DOM元素时出现jQuery滚动条问题

Question

在我的网页中，每张图片都显示为缩略图。单击图像时，它会隐藏自身并创建与兄弟相同图像的更大版本。再次单击时，隐藏较大的兄弟，并再次显示缩略图。

这是一个展开/折叠功能。

问题是：当创建较大的图像时，滚动条缩小以腾出空间，但当移除较大的图像时，滚动条不会再回到原始高度。

代码：

// Image Expansion //

$(document).on("click","a[data-cmd='image-expand']", function(e){ //Expand call
    Images.expand(e);
});
$(document).on("click","a[data-cmd='image-collapse']", function(e){ //Collapse call
    Images.collapse(e);
});

var Images = {};

Images.expand = function(e){
    var link = $(e.currentTarget); //The clickable link
    var img = link.children('img'); //Thumbnail image

    var disp = document.createElement('img'); //Larger image created
    $(disp).attr('src', img.attr('src'));

    link.attr('data-cmd', 'image-collapse'); //Change link function
    img.css('display', 'none'); //Hide thumb
    $(disp).appendTo(link); //Place large img 
};

Images.collapse = function(e){
    var link = $(e.currentTarget); //The clickable link
    var img = link.children('img').last(); //Larger image

    link.attr('data-cmd', 'image-expand'); //Change link function
    img.remove(); //Remove large img
    link.children('img').show(); //Show thumb
};

这就是我在图片中的意思：

扩张前：

在扩展期间（注意较小的滚动条）：

折叠后（通知滚动条大小与第二张图像相同）

P.S。标题类似于this question，但要求不同的答案。