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包装在高度为300像素的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

希望我帮助过。

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

1 个答案: