有没有办法在Facebook API中获得窗口滚动位置？

Question

在FB.Canvas API中有一些方法来获取滚动顶部,偏移顶部和客户端高度(通过getPageInfo())但我需要一种方法来找到最顶层的窗口滚动位置,以便我可以确定我需要的区域对客户可见的是可见的.用户将通过表格进行制表,并且比大多数屏幕更高.我需要确保表单项可见.

Answer 1

看来 getPageInfo().scrollTop 属性和 getPageInfo().offsetTop 一起将为您提供顶部窗口滚动位置。

这是我在给定绝对/全局 x 和 y 坐标的情况下用于将元素滚动到视图中的最终代码。

function scrollElementIntoViewFB(applicationID, elementTop, elementBottom) {
    var pageInfo = FB.Canvas.getPageInfo();

    // fallback if running local
    if (pageInfo.clientHeight==0) {
         scrollElementIntoView(applicationID, elementTop, elementBottom);
         return;
    }

    var scrollPosition = pageInfo.scrollTop;
    var viewportHeight = pageInfo.clientHeight;
    var flashOffsetTop = pageInfo.offsetTop;
    var elementAbsoluteTop = elementTop + flashOffsetTop;
    var elementAbsoluteBottom = elementBottom + flashOffsetTop;
    var visibleBottomPosition = viewportHeight + scrollPosition;

    if (scrollPosition>elementAbsoluteTop) {
        FB.Canvas.scrollTo(0, elementAbsoluteTop);
    }
    else if (visibleBottomPosition<elementAbsoluteBottom) {
        FB.Canvas.scrollTo(0, elementAbsoluteBottom-viewportHeight);
    }


    return true;
}

如果由于某种原因您想要纯 HTML 版本（如果在 Facebook 等另一个域内的 iframe 中则无法使用，但可以在您自己的网站上使用）：

function scrollElementIntoView(applicationID, elementTop, elementBottom) {
    var scrollPosition = f_scrollTop();
    var viewportHeight = f_clientHeight();
    var flashElement = swfobject.getObjectById(applicationID);
    var flashOffsetTop = flashElement.offsetTop; // not sure if this is cross browser   
    var elementAbsoluteTop = elementTop + flashOffsetTop;
    var elementAbsoluteBottom = elementBottom + flashOffsetTop;
    var visibleBottomPosition = viewportHeight + scrollPosition;

    if (scrollPosition>elementAbsoluteTop) {
        window.scrollTo(0, elementAbsoluteTop);
    }
    else if (visibleBottomPosition<elementAbsoluteBottom) {
        window.scrollTo(0, elementAbsoluteBottom-viewportHeight);
    }

    return true;
}

通过名称在线搜索其他函数，您将找到其余的代码。