iOS下的iframe中无法实现平滑滚动效果

Question

下面的脚本为网页中单击锚链接时添加平滑滚动效果。

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

适用于大多数现代浏览器，包括iOS和Android的移动浏览器。但是，如果在iframe内运行脚本，则iOS浏览器不会应用平滑滚动效果。实际上，锚点链接将变得无用（如果用户单击其中一个，则什么也不会发生）。即使在iframe内部，该脚本也可以在Android和几乎所有桌面浏览器中工作。

iOS在iframes方面存在各种问题。例如，即使iframe声明高度为300px，iOS也会扩展iframe的高度以适应内容，而没有滚动条。解决方法是：将iframe包装在高度为300px的div中，并添加overflow: auto;和-webkit-overflow-scrolling: touch;。

回到我的问题。为什么这样一个简单的脚本在iframe中在iOS上失败？这可能与iOS处理iframes的方式有关（如上所述）？

为了澄清事情，我需要在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

- Malasorte

---

请检查您的 Z 轴顺序。z-index 必须为 0 才能启用本机滚动。 - tnt-rox

谢谢，但那不是。现在已经测试过了。 - Malasorte

抱歉啊，值得一试))... 最后两分钱)) 你试过scrollIntoView()吗？ - tnt-rox

Answer 1

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

但是，在从框架中访问父文档时，框架域必须与父域相同。请检查这一点。

你请求中不太容易理解的一件事情是，你最终需要滚动哪个文档？父文档还是框架文档？

另一件事，我无法理解你尝试使用以下代码实现的目标：

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

我认为这个选择器不会匹配任何内容。除非你将CSS选择器存储在 href 值中...

我猜你正在寻找更简单（而且有效）的方法，可以使用以下代码：

$(this).offset().top

希望我能帮到你。

- VPusher

---

我需要在框架文档中滚动，这两个文档都来自同一个域。感谢您解释选择器上下文，我现在明白了。将继续进行一些测试。 - Malasorte