html - 如何使页面滚动到底部并专注于iframe

Question

我有一个网页，上面有一个巨大的横幅图片和一些内容。在它下面，我有一个用于 YouTube 视频的 iframe。该网页具有响应能力，但当我在移动设备上打开它时，标题太大，用户需要向下滚动才能观看视频。

我想要实现的是当用户在移动设备上打开网页时，它应该自动向下滚动到 iframe。我怎样才能做到这一点？

Answer 1

为此，您将需要 javascript。

document.documentElement.clientHeight 返回客户端的高度。

如果这还不够高，您应该向下滚动它们:

window.scrollTo(0, 500);

那么可能:

if(document.documentElement.clientHeight < 500) {
    window.scrollTo(0, 500);
}

高度取决于横幅的大小和 Iframe 的位置。

---

如果您只希望使用 CSS，您也可以尝试在窗口高度不够时将横幅移动到 Iframe 下方。

您可以为此使用媒体查询:

div div {
  width:100px;
  height:100px;
}

div[blue] {
  background-color:blue;
} 

div[green] {
  background-color:green;
}

div[parent] {
  display:flex;
  flex-direction: column-reverse; 
}

@media only screen and (min-width: 600px) {

  div[parent] {
    flex-direction: column; 
  }

}

<div parent>

  <div green>
  green
  </div>

  <div blue>
  blue
  </div>

</div>