如何使用 jquery 从内部滚动 iframe？答案

【问题标题】：How do you scroll an iframe from within using jquery?如何使用 jquery 从内部滚动 iframe？
【发布时间】：2011-02-20 23:18:56
【问题描述】：

我正在使用一个影子框，它生成一个 iframe 以在页面上显示产品详细信息。因为详细信息页面可能很长，所以客户端想要一个向下滚动页面的“更多”按钮（显然 iframe 右侧的滚动条不够用）。

这是我尝试让 iframe 滚动的代码：

$(document).ready(function()
{
$(".moreButton img").click(function() {
    scrollbottom();
});
});

function scrollbottom() {
var x = 250; // this number is a temporary placeholder
var t = 500;
$("iframe").animate({ scrollTop: x }, t);
}

我也尝试过使用 body 代替 iframe，但无济于事。有任何想法吗？谢谢！

【问题讨论】：

标签： javascript jquery iframe scroll vertical-scrolling

【解决方案1】：

像这样：（已测试）

$("iframe").contents().children().animate({ scrollTop: x }, t);

【讨论】：

$('iframe').contents().animate({ scrollTop: x }, t);这似乎也不起作用。
@DavidReynolds：您可能正在与 SOP 作斗争。你得到什么错误？

【解决方案2】：

像这样在父 javascript 中创建一个函数：

function scrollToPoint(top) {
    $("html, body").animate({ scrollTop: top }, "slow")
}

并像这样在 iframe 中调用该函数：

window.parent.scrollToPoint(top);

它应该在 chrome 中工作，尚未在 Firefox 中测试

【讨论】：

【解决方案3】：

这最终奏效了：

$('html,body').animate({ scrollTop: x }, t);

【讨论】：

以上行是否解决了您的问题？我遇到了同样的问题，但无法通过上述行解决
是的，这最终对我有用。我给你的唯一建议是确保你的函数范围是正确的。如果您的代码在 iframe 本身中，请记住它不会像在新加载的页面上那样自动运行。您必须从父框架调用它。

【解决方案4】：

在 Chrome 中，我必须专门选择 body 元素：

$('#my-iframe').contents().find('body').animate({scrollTop:90},500);

【讨论】：