时间戳

首页 > 解决方案 > 如何滚动到仍未呈现的页脚图像？

javascript - 如何滚动到仍未呈现的页脚图像？

问题描述

语境

我在页面的页脚有一张图片，比如

|header|
\\\\\\\\
\\\\\\\\
\\\\\\\\
|image|
\\\\\\\\
\\\\\\\\
|footer|

要滚动到上述图像，我使用了：

image.scrollIntoView()

问题

但它仅在浏览器完全加载图像时才有效。但是，如果页面未加载，则页面不会滚动到它，因为图像尚未呈现并且没有正确的偏移量

但是，当我将它绑定到onload喜欢时，它确实有效

window.onload = function(){
  image.scrollIntoView()
}

不幸的是，这会导致糟糕的用户体验，因为：

标签： javascripthtml

解决方案

解决方案 - 父容器

因此，在加载图像的情况下，您可以构建一个已知尺寸的查看器父元素，并且可以在其中加载图像。该图像可以是：

  • 拉伸
  • 按高度/宽度最大化（并截断）
  • 按高度/宽度（和填充）最大化

就像是：

document.addEventListener("DOMContentLoaded", _ => {
  // Handler when the DOM is fully loaded
  const img = document.querySelector('#MainImage5')
  setTimeout(_ => {
    img.scrollIntoView()
  }, 50)
});
figure {
  display: block;
  height: 500px;
  overflow: hidden;
  position: relative;
}

figure>img {
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  transform: translateX(-50%);
  height: 100%;
  display: block;
}

header,
footer {
  padding: 1em;
  background: #ff9800;
  color: white
}

footer {
  background: #4caf50
}
<body>
  <header>
    <h1>This is the header</h1>
  </header>
  <section class='Main-Content'>
    <ul>
      <li>Other Point</li>
      <li>Other Point</li>
      <li>Other Point</li>
      <li>Other Point</li>
      <li>Other Point</li>
      <li>Other Point</li>
      <li>Other Point</li>
      <li>Other Point</li>
      <li>Other Point</li>
      <li>Other Point</li>
      <li>Other Point</li>
      <li>Other Point</li>
      <li>Other Point</li>
      <li>Other Point</li>
    </ul>
    <figure id='MainImage'>
      <img src='https://miro.medium.com/max/1200/0*UEtwA2ask7vQYW06.png'>
    </figure>
    <figure id='MainImage2'>
      <img src='https://wallpaperplay.com/walls/full/d/c/0/20618.jpg'>
    </figure>
    <figure id='MainImage3'>
      <img src='https://wallpaperplay.com/walls/full/d/c/0/20618.jpg'>
    </figure>
    <figure id='MainImage4'>
      <img src='https://wallpaperplay.com/walls/full/d/c/0/20618.jpg'>
    </figure>
    <figure id='MainImage5'>
      <img src='https://wallpaperplay.com/walls/full/d/c/0/20618.jpg'>
    </figure>
    <ul>
      <li>Other Point</li>
      <li>Other Point</li>
      <li>Other Point</li>
      <li>Other Point</li>
      <li>Other Point</li>
      <li>Other Point</li>
      <li>Other Point</li>
      <li>Other Point</li>
      <li>Other Point</li>
      <li>Other Point</li>
      <li>Other Point</li>
      <li>Other Point</li>
      <li>Other Point</li>
      <li>Other Point</li>
    </ul>
  </section>
  <footer>I am the footer</footer>
</body>

注意：您可以点击Run Snippet查看演示

附录

为了演示它确实滚动到图像，我还增强了图像上方和下方的内容，同时保留了页眉和页脚。

解释

这基本上是通过允许浏览器花时间加载图像来工作的，但是我们限制它的宽度以匹配容器宽度（高度自动缩放）。

编辑：容器还需要一个最小高度才能正常滚动，我们正在使用20px

推荐阅读