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

Posted 2023-03-05

【中文标题】平滑滚动效果在 iOS 上的 iframe 中不起作用

【英文标题】：Smooth scroll effect does not work in an iframe on iOS

【发布时间】：2016-04-28 03:30:01

【问题描述】：

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

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

适用于大多数现代浏览器，包括适用于 ios 和 android 的移动浏览器。但是，如果脚本在 iframe 中运行，iOS 上的浏览​​器不会应用平滑滚动效果。事实上，锚链接是无用的（如果用户点击一个，什么都不会发生）。即使在 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

【问题讨论】：

看看你的z顺序。 z-index 必须为 0 才能使用原生滚动。

谢谢，但事实并非如此。现已测试。

对不起，值得一试 )) ... 最后 2c )) 你试过 scrollIntoView()

【参考方案1】：

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

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

您的请求中不明显的地方是您最终需要滚动哪个文档？父级还是框架一？

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

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

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

我猜你正在寻找更简单的东西（顺便说一句）：

$(this).offset().top

希望我能帮上忙。

【讨论】：

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