FB.Canvas.scrollToをどのようにアニメーション化しますか？

Question

私は、ユーザーが長いページをナビゲートするのを助けるために、設定されたサイズ（約2,000 pxの高さ）のアプリケーションを作成し、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

これを行う1つの方法は、現在のY位置を取得し、次にY位置に移動することです。ユーザーを最後のY位置に移動させるsetTimeoutを使用してforループを実行します。

Answer 3

私はフランシスの技術を使用し、あなたがにスクロールしたいセレクタで.scroll_to_meを交換する必要がjQueryのバージョン

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

を実施しました。また、+ 30にオフセットを追加しました。これはiframeがページの先頭で始まらないため、これを調整する必要があるかもしれません。

Answer 4

今日は同じ問題を抱えていました - jQueryのanimateメソッドを使って少しイージングを提供するjavascriptを思いついた - スクロールはまだまだタッチがぎくしゃりです（私は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); 
     } 
    }); 
}