首页 文章

停止父页面向下滚动到iframe

提问于
浏览
1

我使用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 回答

  • 0

    好的,我添加了一些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);
    }
    

    试一试,让我知道它是否有效!

相关问题