ajax - 滚动 Facebook Canvas

Question

我正在构建一个 Facebook 应用程序。 Facebook Canvas 类型是 FBML，然后我将 fb:iframe 放在索引页面中，在该 iframe 中加载我的 ajax 引擎，然后，所有内容都通过 ajax 更新。有时内容页面可能很长并且需要用户向下滚动(使用主浏览器滚动条)。但是，当您在向下滚动后单击链接并加载下一个内容页面时，滚动条仍保留在原来的位置(这是有道理的)，因此您必须滚动回顶部。

我设法通过在加载数据后强制滚动来解决这个问题。它确实到达了 div 的顶部，但没有到达 facebook 栏所在的页面顶部。我尝试滚动父窗口，但由于跨站点安全限制，这是不可能的。

我注意到，当您在加载内容的同一位置使用 FB.ui(即创建要发布的流)时，它会一直滚动到顶部。所以我想也许有一个 FB api 调用可以做到这一点，但我找不到它。

或者无论您是否在 iframe 中，都可以通过某种方式强制浏览器一直向上滚动？

有什么想法吗？

Answer 1

2011 年 4 月更新: Facebook 将 FB.CanvasClient.scrollTo 方法添加到他们的新 JavaScript SDK 中。你现在要做的就是:

FB.Canvas.scrollTo(0,0);

更多信息在这里:http://developers.facebook.com/docs/reference/javascript/FB.Canvas.scrollTo/

---

2011 年 4 月更新:以下内容现已过时，但我将其留在这里以供引用...

您使用的是新的 JavaScript SDK 还是旧的？使用旧的，您可以这样做:

FB.CanvasClient.scrollTo(0,0)

不幸的是，Facebook 不支持带有新 JavaScript API 的 scrollTo() 方法。我还没有在 FBML 应用程序中尝试过这种下一种技术，但我在 Canvas iframe 应用程序中使用它确实取得了成功(代码从这里借用:http://forum.developers.facebook.net/viewtopic.php?id=32906):

var x = 0, y = 0;
$("body").append('<iframe id="scrollTop" style="border:none;width:1px;height:1px;position:absolute;top:-10000px;left:-100px;" src="http://static.ak.facebook.com/xd_receiver_v0.4.php?r=1#%7B%22id%22%3A0%2C%22sc%22%3Anull%2C%22sf%22%3A%22%22%2C%22sr%22%3A2%2C%22h%22%3A%22iframeOuterServer%22%2C%22sid%22%3A%220.957%22%2C%22t%22%3A0%7D%5B0%2C%22iframeInnerClient%22%2C%22scrollTo%22%2C%7B%22x%22%3A' + x + '%2C%22y%22%3A' + y + '%7D%2Cfalse%5D" onload="$(\'#scrollTop\').remove();"></iframe>'); 

虽然上述技术会将窗口滚动到顶部，但我发现它并不是 100% 可靠的。例如，它似乎不适用于 Facebook 的新 Page iframe 标签。所以我采用了这种 100% 可靠的技术，但不幸的是，它只会滚动到 iframe 的顶部:

把它放在你的开始标签下面:

<a id="top" name="top" style="display:block;height:1px;width:1px;"></a>

以及将执行滚动的 JavaScript；

     window.location.hash = 'top';
     window.location.hash = '';