将 facebook 画布应用高度设置为等于 Facebook 侧边栏的高度答案

【问题标题】：Set facebook canvas app height equal to the height of the Facebook sidebar将 facebook 画布应用高度设置为等于 Facebook 侧边栏的高度
【发布时间】：2012-02-29 07:09:18
【问题描述】：

我有一个 facebook 画布应用程序设置，其宽度和高度在高级应用程序设置中是可变的。

我需要实现的是将我的画布应用程序的高度设置为等于 Facebook 侧边栏的高度（所有 FB 添加和链接出现的侧窗格）。目前，画布应用程序设置为流体，这将应用程序的高度设置为等于视图区域，因此 FB 侧边栏比视图区域高一点，默认情况下滚动页面，因此在我的画布应用程序下方创建空间。

我尝试将高度设置为固定，但随后它从 iframe 中删除了滚动条（将溢出隐藏到 iframe），这是不可取的，因为应用程序包含超过固定高度的内容。

检查此以更好地理解http://jsfiddle.net/v2QKN/5/

【问题讨论】：

您是否有它在您的应用程序下方添加的空间的屏幕截图，以便我们更好地了解问题？
我在我的问题中添加了一个 jsfiddle.. 看看

标签： javascript jquery css facebook

【解决方案1】：

当它们到达底部时停止滚动

好的，这可能不是最简洁的解决方案。但是当 iframe 内的正文已经完全滚动时，我一直在出现空白区域，因此主窗口滚动接管了。

所以，对我来说，一个非常有效的解决方案就是在我不再需要滚动时停止滚动。用户将在画布内滚动 99% 的时间。所以要做到这一点，我们只需要几行 javascript：

$("body").on("mousewheel", function(e) {

  if ( ( window.innerHeight + document.body.scrollTop) >= $("body").height()  ) {
    e.preventDefault();
    e.stopPropagation();
    document.body.scrollTop = document.body.scrollTop - 1;
  }

});

在此处查看实际操作：https://apps.facebook.com/hiphopexpress/

注意：鼠标滚轮事件仅由鼠标滚轮触发。尽管如此，通过这个解决方案，我们正在改善绝大多数桌面用户的体验。

【讨论】：

这“大部分时间”都有效，我还添加了FB.Canvas.scrollTo(0,0); 以确保我将父窗口滚动到顶部。

【解决方案2】：

无法将您的画布应用设置为侧边栏的高度，但是您可以使用固定的画布高度以及 Javascript SDK setAutoGrow 函数，该函数将调整包含应用的框架的大小以适应它内容。如果您不希望侧边栏高于您的应用内容，我认为这是您的最佳选择。

【讨论】：

但要让 setAutoGrow 工作，我必须将高度设置为固定而不是流动的，这将从我的应用程序中删除滚动，我将无法滚动浏览我的应用程序。
是的，但 AutoGrow 的重点是它始终适合您的应用程序高度，因此您不需要滚动条。它不会影响应用 iFrame 中的滚动条，只会影响主窗口滚动条。
实际上，每当用户滚动到底部（延迟加载）时，我的应用程序中的内容就会被加载......它基本上是一个网格。这将由 setAutoGrow 处理程序处理吗？我也有点犹豫，因为我不想要巨大的页面滚动条，因为它会在侧边栏部分添加空白。
你真的别无选择，要么在应用下方获得空白，要么在侧边栏下方获得空白。如果你想最终控制滚动，你应该有一个 iFrame inside 你的画布应用程序（基本上是一个双 iFrame），你可以在自己的代码中完成所有滚动处理，否则你'将不得不与 setAutoGrow 一起生活。您可以随时触发该自动增长功能，也许在您的延迟加载 Javascript 的成功函数处理程序中？
@Mathew：感谢您的回复，一种方法是在我的应用程序中添加另一个内框，我可以通过指定高度来使 div 可滚动，并将画布应用程序设置为固定高度设置面板。