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

Question

工作版本，尝试多次选择图像。

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

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