javascript - 将 facebook Canvas 应用程序高度设置为等于 Facebook 侧边栏的高度

标签 javascript jquery css facebook

我有一个 facebook canvas 应用设置,其宽度和高度在高级应用设置中设置为流畅。

我需要实现的是将我的 Canvas 应用程序的高度设置为等于 Facebook 侧边栏(所有 FB 添加和链接出现的侧 Pane )的高度。 目前,canvas 应用程序设置为 fluid,它将应用程序的高度设置为等于 View 区域,所以发生的是 FB 侧边栏比 View 区域高一点,默认情况下滚动页面,因此在我的 Canvas 应用程序下方创建空间。

我曾尝试将高度设置为固定,但随后它会从 iframe 中删除滚动条(将溢出 Conceal 到 iframe),这是不可取的,因为应用程序包含超过固定高度的内容。

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

最佳答案

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

好吧,这可能不是最好的解决方案。 但是,当 iframe 内的主体已经完全滚动时,那个空白一直在我身上发生,所以主窗口滚动接管了。

因此,对我来说一个非常有效的解决方案就是在我不再需要时停止滚动。 99% 的情况下,用户会在 Canvas 内滚动。所以要做到这一点,我们只需要几行 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/

注意:鼠标滚轮事件只能由鼠标滚轮触发。尽管如此,我们仍通过此解决方案改善了绝大多数桌面用户的体验。

关于javascript - 将 facebook Canvas 应用程序高度设置为等于 Facebook 侧边栏的高度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/9494932/

相关文章:

javascript - 根据时间戳隐藏div容器

jQuery - 在更改时重置文件输入

javascript - 正则表达式匹配与 jQuery 不同

javascript - div 向上滑动并停留在原位

javascript - Discord JS - 交互创建和消息创建

javascript - 传递值给父组件 undefined

javascript - 按属性过滤掉对象(不删除)

javascript - 使用 spring mvc 和 apache pdf 框从 UI 下载的空的和损坏的 pdf 文件

HTML、CSS : Display HTML code with `<xmp>` , `<pre>` 或 `code` ?

javascript - D3 : finding graph y-coordinate with mouseover