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

下面的脚本在单击网页中的锚链接时会添加平滑的scrool效果。平滑滚动效果在iOS的iframe中不起作用

$('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包装在高度为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/iframe.txt

：把在iframe这里的HTML文件的 http://www.nightskyinfo.com/iframe2/index.txt

周守军代码

来源

2016-01-21 Malasorte

看看你的z订单。 z-index必须为0才能进行本地滚动。 –

谢谢，但那不是。现在测试。 – Malasorte

对不起，值得一试））...最后2c））你有没有尝试scrollIntoView（） –

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

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

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

另一件事，不能让你正在努力实现这个什么：

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

恕我直言，这个选择将匹配什么。除非你是存储CSS选择href值...

我猜你与寻找的东西简单（BTW工作）：

$(this).offset().top

希望我帮助。

来源

2016-01-21 19:58:48 VPusher

我需要在框架文档中滚动，两个文档都从同一个域提供。感谢您解释选择器上下文，我现在明白了。将继续用这个做一些测试。 – Malasorte

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

回答

相关问题