使用javascript添加图像后浏览器滚动条移位

Question

我有一个带有图片上传的活动创建页面。选择图像后，图像会在浏览器中预览。添加图像后滚动时，我看到底部滚动条停留在屏幕中间，直到我专注于输入元素。例如，当我专注于描述文本区域时，中间的滚动条消失了。

工作版本在 jsbin 中，请尝试多次选择图像。 jsbin中的问题：

https://jsbin.com/wigawededo/1/edit?html,css,js,output

我的电脑问题：

选择图像后，我会使用以下代码预览它：

function showImage() {
  var imageSelector = document.getElementById("image");
  var image = document.getElementById("image").files[0];
  var reader = new FileReader();
  reader.onload = function(e) {
    const prevImage = document.querySelector("#previewImage");
    if (prevImage) prevImage.parentNode.removeChild(prevImage);

    const prevImageLabel = document.querySelector("#previewImageLabel");
    if (prevImage) prevImageLabel.parentNode.removeChild(prevImageLabel);

    var newImage = document.createElement("img");
    newImage.style.maxHeight = "300px";
    newImage.style.maxWidth = "300px";
    newImage.id = "previewImage";
    newImage.src = e.target.result;

    var imageLabel = document.createElement("p");
    imageLabel.innerHTML = "Preview image:";
    imageLabel.id = "previewImageLabel";

    imageSelector.parentNode.insertBefore(
      imageLabel,
      imageSelector.nextSibling
    );
    imageSelector.parentNode.insertBefore(
      newImage,
      imageSelector.nextSibling.nextSibling
    );
  };
  if (image) reader.readAsDataURL(image);
  else {
    const prevImage = document.querySelector("#previewImage");
    if (prevImage) prevImage.parentNode.removeChild(prevImage);
    const prevImageLabel = document.querySelector("#previewImageLabel");
    if (prevImage) prevImageLabel.parentNode.removeChild(prevImageLabel);
  }
}

文件选择器输入具有#image id。注意，如果没有选择文件，此代码会删除预览图像。

我只是想知道为什么会这样。你能想出一个解决办法吗？谢谢。

注意：我在 ubuntu linux 上使用 chrome

Answer 1

您的某些内容必须出现在屏幕之外。尝试使用溢出：隐藏或尝试减少输入/其他元素的宽度。