Question

我使用iframe嵌入了一个网站。无论何时加载父页面，嵌入页面都会使父页面向下滚动到iframe。我无法更改嵌入页面中的任何代码，只能更改父页面。这是[问题的小提琴] [1]：

HTML：

<iframe src="http://store.ecwid.com/#!/~/cart" width="100%" height="100%" id="Container"></iframe>

CSS：

body { margin-top: 100px; height: 1000px; }

如何阻止父页面向下滚动到iframe？

重要更新：几乎在那里

所以我们添加了以下javascript来强制页面将bacl滚动到顶部：

window.addEventListener("scroll", runOnScroll);

function runOnScroll(){
    window.scrollTo(0, 0);
    window.removeEventListener("scroll", runOnScroll);
}

它确实有效，因为你可以看到[在这个小提琴] [2]。但是，在iPad和iPhone上，您可以清楚地看到页面再次向后搜索。在PC上，您无法看到过渡。请访问[本网站] [3]，以便检查两种转换（个人电脑和手机）。我想知道是否有任何我们可以添加到代码中的内容：

移动设备中的转换并未像电脑中那样被注意到（首选）

OR

转换更顺畅（滚动速度较慢或类似）

Answer 1

好的，我添加了一些JavaScript，可以在第一次向下滚动文档时收听。当文档第一次向下滚动时，它会强制自己回到顶部，然后它会删除监听器，以便用户可以根据需要滚动。

<强> HTML

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="style.css"></link>
<script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
</head>

<body>
<iframe src="http://store4549118.ecwid.com/#!/~/cart" width="100%" height="100%" id="Container"></iframe>
<script src="scripts.js"></script>
</body>
</html>

JAVASCRIPT （在名为scripts.js的文件中）

window.addEventListener("scroll", runOnScroll);

function runOnScroll(){
    $('html,body').animate({scrollTop: 0},1000);
    window.removeEventListener("scroll", runOnScroll);
}

试一试，让我知道它是否有效！

停止父页面向下滚动到iframe

1 个答案: