阻止父页面向下滚动到 iframe

Question

我使用 iframe 嵌入了一个网站。每当父页面加载时，嵌入页面都会使父页面向下滚动到 iframe。我无法更改嵌入式页面中的任何代码，只能更改父页面。这是问题的 [fiddle][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 以强制页面滚动到顶部：

window.addEventListener("scroll", runOnScroll);

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

正如您在 [fiddle][2] 中看到的那样，它确实有效。但是，在 iPad 和 iPhone 上，您可以清楚地看到页面再次向上滚动。在 PC 上，您看不到过渡。请访问 [本网站][3]，以便您可以检查两种转换（PC 和移动设备）。我想知道是否有任何我们可以添加到代码中的内容：

移动端的转换不像在 pc 端那样被注意到（首选）

或

过渡更流畅（滚动速度更慢或类似的东西）

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

stop parent page from scrolling down to iframe

html

javascript

css

iframe

jquery