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

Smooth scroll effect does not work in an iframe on iOS

本文关键字：上的 iframe 不起作用 iOS 滚动 平滑      更新时间：2023-09-26

下面的脚本在单击网页中的锚链接时添加了平滑的scrool效果。

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

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

iOS在iframes方面存在各种问题。例如，即使 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文件的Souce代码在这里：http://www.nightskyinfo.com/iframe2/iframe.txt

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

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

在您的请求中不明显理解的是您最终需要滚动哪个文档？ 父文档还是框架文档？

另一件事，无法通过此实现您想要实现的目标：

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

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

我想您正在寻找更简单（并且顺便说一句）的东西：

$(this).offset().top

希望我有帮助。

相关文章：