你如何为FB.Canvas.scrollTo设置动画？

Question

我创建了一个设置大小的应用程序（大约2,000像素高），并有一个调用FB.Canvas.scrollTo的菜单，以帮助用户导航长页面。

有什么办法可以添加平滑的滚动效果吗？ Facebook不在其开发者博客上提供任何解决方案。

Answer 1

使用@强尼的方法，你可以做到这一点更简单地

function scrollTo(y){ 
    FB.Canvas.getPageInfo(function(pageInfo){ 
      $({y: pageInfo.scrollTop}).animate(
       {y: y}, 
       {duration: 1000, step: function(offset){ 
        FB.Canvas.scrollTo(0, offset); 
       } 
      }); 
    }); 
} 

Answer 2

这样做的一种方法是获取当前的Y位置，然后获得Y位置。使用setTimeout运行for循环，将用户带到最终的Y位置。

Answer 3

我只是用弗朗西斯的技术，并实现了一个jQuery版本

$('html,body').animate(
    {scrollTop: $(".scroll_to_me").offset().top}, 
    {duration: 1000, step: function(top_offset){ 
    FB.Canvas.scrollTo(0, top_offset + 30); 
    } 
}); 

你需要要滚动到选择更换.scroll_to_me。另外，我在+ 30中添加了偏移量，因为iframe不会从页面顶部开始，所以您可能需要调整它。

Answer 4

今天刚刚有同样的问题 - 我想出了一点点的JavaScript，它利用jQuery的animate方法提供了一些缓解 - 滚动仍然是一个触摸生涩（我猜这是因为FB。 Canvas.scrollTo代理）。总之，这里的代码片段：

function scrollToTop() { 
    // We must call getPageInfo() async otherwise we will get stale data. 
    FB.Canvas.getPageInfo(function (pageInfo) { 

     // The scroll position of your app's iFrame. 
     var iFrameScrollY = pageInfo.scrollTop; 

     // The y position of the div you want to scroll up to. 
     var targetDivY = $('#targetDiv').position().top; 

     // Only scroll if the user has scrolled the window beneath the target y position. 
     if (iFrameScrollY > targetDivY) { 
      var animOptions = { 

       // This function will be invoked each 'tick' of the animation. 
       step: function() { 
        // As we don't have control over the Facebook iFrame we have to ask the Facebook JS API to 
        // perform the scroll for us. 
        FB.Canvas.scrollTo(0, this.y); 
       }, 

       // How long you want the animation to last in ms. 
       duration: 200 
      }; 

      // Here we are going to animate the 'y' property of the object from the 'iFrameScrollY' (the current 
      // scroll position) to the y position of your target div. 
      $({ y: iFrameScrollY }).animate({ y: targetDivY }, animOptions); 
     } 
    }); 
}