Javascript 创建元素后滚动到页面底部

我想自动滚动到页面底部，但当我运行下面的代码时，它不会完全滚动

function createElement1() {

    var x = document.createElement("IMG");
    x.setAttribute("src", "myImg");
    x.setAttribute("width", "auto");
    x.setAttribute("height", "auto");
    x.setAttribute("alt", "img");
    document.getElementById("id").appendChild(x);

    window.scrollTo(0,document.body.scrollHeight);
}

我也试过了

element.scrollTop = element.scrollHeight

我用铬

---

提前谢谢

根据我的评论：滚动显示不完整的原因是，当您检索主体的滚动高度时，您的图像仍在加载，并且在图像加载时，主体的高度已经增加。这会使旧值过时，因此您会看到它不会一直滚动到底

解决方法是仅在加载图像后执行滚动。在以下情况下，可通过启动滚动至底部逻辑来实现：

• 图像已触发加载事件，或
• 图像的

  complete

  属性的计算结果为true，并且具有非零的自然宽度/高度（主要是IE的修复，对于从缓存加载的图像，IE不会触发

  load

  事件）

见下面的概念证明：

函数createElement1（）{
var x=document.createElement（“IMG”）；
//滚动至底部逻辑
函数scrollToBottom（）{
scrollTo（0，document.body.scrollHeight）；
}
//附加加载事件侦听器
x、 addEventListener（'load'，function（）{
scrollToBottom（）；
});
//修复IE从缓存加载图像的问题
如果（x.complete&&x.naturalWidth>0）{
scrollToBottom（）；
}
x、 setAttribute（“src”https://via.placeholder.com/400x400");
x、 setAttribute（“宽度”、“自动”）；
x、 setAttribute（“高度”、“自动”）；
x、 setAttribute（“alt”、“img”）；
document.getElementById（“id”）.appendChild（x）；
}
createElement1（）
#填充{
背景颜色：钢蓝色；
高度：50vh；
}
只是为了占用空间
根据我的评论，要附加在下面的图像：滚动显示不完整的原因是，当您检索主体的滚动高度时，您的图像仍在加载，并且在图像加载时主体的高度已经增加。这会使旧值过时，因此您会看到它不会一直滚动到底

解决方法是仅在加载图像后执行滚动。在以下情况下，可通过启动滚动至底部逻辑来实现：


图像已触发加载事件，或
图像的
complete
属性的计算结果为true，并且具有非零的自然宽度/高度（主要是IE的修复，对于从缓存加载的图像，IE不会触发
load
事件）

见下面的概念证明：


函数createElement1（）{
var x=document.createElement（“IMG”）；
//滚动至底部逻辑
函数scrollToBottom（）{
scrollTo（0，document.body.scrollHeight）；
}
//附加加载事件侦听器
x、 addEventListener（'load'，function（）{
scrollToBottom（）；
});
//修复IE从缓存加载图像的问题
如果（x.complete&&x.naturalWidth>0）{
scrollToBottom（）；
}
x、 setAttribute（“src”https://via.placeholder.com/400x400");
x、 setAttribute（“宽度”、“自动”）；
x、 setAttribute（“高度”、“自动”）；
x、 setAttribute（“alt”、“img”）；
document.getElementById（“id”）.appendChild（x）；
}
createElement1（）
#填充{
背景颜色：钢蓝色；
高度：50vh；
}
只是为了占用空间
要追加到
元素下面的图像。scrollTop
是只读属性，无法分配：您需要使用
窗口。scrollTo（）
。它不能完全滚动的问题是，在加载图像后，主体滚动高度会发生变化。加载图像后，您需要触发滚动以获得准确的正文滚动高度。
元素。scrollTop
是只读属性，无法分配：您需要使用
window.scrollTo（）
。它不能完全滚动的问题是，在加载图像后，主体滚动高度会发生变化。你需要在图像加载后触发滚动以获得准确的身体滚动高度。回答得真不错！我没有注意到IE在
img.load
中的bug。我没有在你的链接答案中看到这个应用到的IE版本，有什么想法吗？@MorganWilde我想这适用于所有版本的IE:）真是个不错的答案！我没有注意到IE在
img.load
中的bug。在你的链接答案中，我没有看到这个应用到的IE版本，有什么想法吗？@MorganWilde我想这适用于所有版本的IE:）