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

Question

下面的脚本在点击网页中的 anchor 链接时添加了平滑的滚动效果。

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

适用于大多数现代浏览器，包括适用于 iOS 和 Android 的移动浏览器。但是，如果脚本在 iframe 中运行，iOS 上的浏览​​器不会应用平滑滚动效果。事实上， anchor 链接变得毫无用处(如果用户点击一个，什么也不会发生)。即使在 iframe 中，该脚本也适用于 Android 和几乎所有桌面浏览器。

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

回到我的问题。为什么这样一个简单的脚本在 iOS 上的 iframe 中会失败？这可能与 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

恕我直言，这个选择器不会匹配任何东西。除非您将 CSS 选择器存储为 href 值...

我猜你正在寻找更简单的(顺便说一句):

$(this).offset().top

希望我有所帮助。