时间戳

首页 > 解决方案 > 在 iframe 中使用时 scrollIntoView/scrollTo 在 IOS 中没有响应

javascript - 在 iframe 中使用时 scrollIntoView/scrollTo 在 IOS 中没有响应

问题描述

我有一个使用 iframe 在网站上显示的应用程序。

请看这个 jsfiddle -> http://jsfiddle.net/7Leatwyu/

这也是一个 stackblitz，它与我的 Angular 应用程序具有类似的代码设置 https://stackblitz.com/edit/angular-c2dnea

在这里你会看到我尝试了一些事情，比如添加 CSS 样式来考虑滚动，包括：

position: absolute; 
top: 0;
left: 0;
right: 0;
bottom:0;
height: 100%;
overflow: auto;
width: 100%;
background-color: white;
z-index: 1000;
-webkit-overflow-scrolling: touch;

当您回答问题或单击下一个按钮时，它会使用下面的代码滚动到正确的下一个问题。如您所见 - 除了 iPhone (IOS) 之外的所有设备都可以使用。对于 IOS - 它不起作用。

scrollTo(el): void {
    const element = document.querySelector(`#${el}`)
    element.scrollIntoView({behavior: "smooth", block: "start", inline: "nearest"});
  }

在这被调用后，我期待窗口滚动到下一个问题，但它没有。那里有解决办法吗？我已经研究了一周，并尝试了许多不同的 javascript 和 CSS 解决方案，但都不起作用。

帮助..

标签： javascripthtmlcssiframeangular7

解决方案

我讨厌多个浏览器。让网页设计师的生活变得痛苦。

无论如何caniuse在 旧的safari 浏览器scrollIntoView上没有最好的支持。仍然不是 100% 更新的。

可以使用jquery吗？

$('html, body').animate({
  scrollTop: $("div.top").offset().top
}, 1000)

像这样？

$(document).ready(function () {
  $('#submit').click(function (){
    $('html, body').animate({
      scrollTop: $(".somediv").offset().top
    }, 1000)
  })
});
.somediv {
  width: 100%;
  height: 100vh;
  background-color: blue;
  margin-top: 100vh;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text"><br />
<a id="submit" href="#">Submit</a>
<div class="somediv"></div>

我不知道这是否正是您想要实现的目标。只是另一种查看滚动到下一个的方式。

您始终可以先将其包装在 if 语句中:)

推荐阅读