时间戳

首页 > 解决方案 > 使用javascript添加图像后浏览器滚动条移位

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

问题描述

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

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

https://jsbin.com/wigawededo/1/edit?html,css,js,输出 jsbin图片

我的电脑上的问题：

问题图片

选择图像后，我使用以下代码对其进行预览：

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

标签： javascripthtmlgoogle-chromeuser-interfacebrowser

解决方案

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

推荐阅读