Question

我有一个使用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解决方案。

帮助..

Answer 1

我讨厌多个浏览器。令网页设计师的生活倍感痛苦。

无论如何caniuse scrollIntoView在 OLDER 野生动物园浏览器中没有最好的支持。仍然不是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语句中：）

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

1 个答案: