我使用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?
IMPORTANT UPDATE: ALMOST THERE
所以我们添加了以下javascript来强制页面将bacl滚动到顶部:
window.addEventListener("scroll", runOnScroll);
function runOnScroll(){
window.scrollTo(0, 0);
window.removeEventListener("scroll", runOnScroll);
}
它确实有效,你可以看到[在这个小提琴] [2] . 但是,在iPad和iPhone上,您可以清楚地看到页面再次向后搜索 . 在PC上,您无法看到过渡 . 请访问[本网站] [3],以便检查两种转换(个人电脑和手机) . 我想知道是否有任何我们可以添加到代码中的内容:
- 移动中的过渡没有像电脑那样被注意到(首选)
要么
- 过渡更顺畅(滚动速度较慢或类似的东西)
1 回答
好的,我添加了一些JavaScript,可以在第一次向下滚动文档时收听 . 当文档第一次向下滚动时,它会强制自己回到顶部,然后它将删除监听器,以便用户可以根据需要滚动 .
HTML
JAVASCRIPT (在名为scripts.js的文件中)
试一试,让我知道它是否有效!