平滑滚动效果在iOS上的iframe中不起作用

Question

当单击网页中的锚链接时,下面的脚本会添加平滑的scrool效果.

$('a').click(function(){
    $('html, body').animate({
        scrollTop: $( $.attr(this, 'href') ).offset().top
    }, 500);
    return false;
});

适用于大多数现代浏览器,包括适用于iOS和Android的移动浏览器.但是,如果脚本在iframe中运行,则iOS上的浏览器不会应用平滑的scrool效果.事实上,锚链接变得无用(如果用户点击一个,没有任何反应).即使在iframe中,该脚本也适用于Android和几乎所有桌面浏览器.

iOS在iframe中存在各种问题.例如,即使iframe的声明高度为300px,iOS也会扩展iframe的高度以适应内容,而不会在内部滚动.解决此问题的方法:将iframe包装在高度为300px的div中并添加overflow: auto;和-webkit-overflow-scrolling: touch;.

回到我的问题.为什么在iframe中iOS上这么简单的脚本会失败？这可能与iOS处理iframe的方式有关(如上所述)？

为了澄清事情,我需要在iOS上的iframe内部使用平滑滚动效果.iframe和父文档都来自同一个域.

任何人,任何想法？

有关工作示例,请参阅此处: http ://www.nightskyinfo.com/iframe2/

主html文件的源代码: http ://www.nightskyinfo.com/iframe2/index.txt

这里放入iframe的html文件的源代码: http ://www.nightskyinfo.com/iframe2/iframe.txt

Answer 1

如果脚本在iframe中运行,则jQuery选择器$将在iframe的文档中查找元素,而不是在父文档中查找.这是选择器上下文.要在父文档中查找元素,您确实可以通过执行$('html, body', parent.document)(或top.document)来指定父文档.

但是,要从帧访问父文档,帧域必须与父域相同.检查一下.

您的请求中无法理解的是您最终需要滚动哪个文档？父母一个还是一个框架？

另一件事,不能得到你想要实现的目标:

$( $.attr(this, 'href') ).offset().top

imho,这个选择器什么都不匹配.除非您将CSS选择器存储为href值...

我想你正在寻找更简单(和工作顺便说一句)的东西:

$(this).offset().top

希望我帮忙.